我有一个 html 模式表单，可以让我更新所选帖子。我创建了一个单击事件，用于获取所选帖子的数据，然后将其传递到表单并填充字段。我的问题是，如果使用 v-if 隐藏表单，我会收到一条错误消息:
无法读取未定义的属性“populateFormFields”
我假设这是因为该组件被隐藏，因此该功能不存在。
我想要发生的是，当在 AppSummary.vue 中单击帖子时，我希望将此帖子数据传递给 UpdateForm.vue 以填充字段，然后我想显示此表单模式。最好的方法是什么？
我的代码；
/src/components/AppSummary.vue
<template>
<div id="summary_section">
<h2>Summary</h2>
<div id="summary_board">
<div class="column">
<div class="head">
<h3>Opportunities</h3>
</div>
<div class="body">
<div class="post"
v-for="post in posts"
v-bind:key="post._id"
v-on:click="openUpdateForm(post)"
>
<p>{{ post._id }}</p>
<p class="company">{{ post.company_name }}</p>
</div>
</div>
</div>
</div>
<SubmitForm v-if="submitFormVisibility" v-on:formSubmitted="newFormSubmission"/>
<UpdateForm ref="updateForm" v-if="updateFormVisibility"/>
</div>
</template>
<script>
import SubmitForm from './SubmitForm.vue';
import UpdateForm from './UpdateForm.vue';
import axios from 'axios';
export default {
components: {
SubmitForm,
UpdateForm
},
data() {
return{
posts: [],
submitFormVisibility: false,
updateFormVisibility: false
};
},
created() {
this.getPostData();
},
methods: {
getPostData() {
axios.get('http://localhost:5000/')
.then(res => {
const data = res.data;
this.posts = data;
})
.catch(error => console.log(error));
},
toggleSubmitFormVisibility(){
this.submitFormVisibility = !this.submitFormVisibility;
},
openUpdateForm(post){
this.updateFormVisibility = !this.updateFormVisibility;
this.$refs.updateForm.populateFormFields(post);
},
newFormSubmission() {
this.getPostData();
this.toggleSubmitFormVisibility();
}
}
}
</script>
/src/components/UpdateForm.vue
<template>
<div id="opp_form_modal">
<svg v-on:click="closeModal" height="25" width="25" class="close_button">
<line x1="2" y1="2" x2="23" y2="23"></line>
<line x1="23" y1="2" x2="2" y2="23"></line>
</svg>
<form @submit.prevent="SubmitOpp">
<p>Update</p>
<label>
Company Name
<input type="text" name="company_name" v-model="company_name">
</label>
<label>
Company Type
<input type="text" name="company_type" v-model="company_type">
</label>
<label>
Line(s) of Business
<select name="lines_of_business" v-model="lines_of_business">
<option disabled="" selected="" value="">Select Option</option>
<option value="Strategic Advisors">Strategic Advisors</option>
<option value="Strategic Sales">Strategic Sales</option>
<option value="Operational Support">Operational Support</option>
<option value="Claims Oversight">Claims Oversight</option>
<option value="Lead Generation">Lead Generation</option>
<option value="Transformation">Transformation</option>
<option value="Audit">Audit</option>
<option value="NED">NED</option>
<option value="Unknown at this stage">Unknown at this stage</option>
<option value="Other">Other</option>
</select>
</label>
<label>
Client Type
<select name="client_type" v-model="client_type">
<option disabled="" selected="" value="">Select Option</option>
<option value="Strategic Partner">Strategic Partner</option>
<option value="Retained Client">Retained Client</option>
<option value="Multiple Projects">Multiple Projects</option>
<option value="Single Project">Single Project</option>
<option value="Other">Other</option>
</select>
</label>
<label>
Contract Type
<select name="contract_type" v-model="contract_type">
<option disabled="" selected="" value="">Select Option</option>
<option value="Retained Monthly">Retained Monthly</option>
<option value="Project Fee">Project Fee</option>
<option value="Hourly Rate">Hourly Rate</option>
</select>
</label>
<label>
Contact Name
<input type="text" name="contact_name" v-model="contact_name">
</label>
<label>
Contact Number
<input type="tel" name="contact_number" v-model="contact_number">
</label>
<label>
Email Address
<input type="email" name="email_address" v-model="email_address">
</label>
<label>
Opportunity Owner
<input type="text" name="opportunity_owner" v-model="opportunity_owner">
</label>
<label>
Decision Maker
<input type="text" name="decision_maker" v-model="decision_maker">
</label>
<label>
Annual Jobs
<input type="text" name="annual_jobs" v-model="annual_jobs">
</label>
<label>
Average Fee
<input type="text" name="average_fee" v-model="average_fee">
</label>
<label>
Annual Value
<input type="text" name="annual_value" v-model="annual_value">
</label>
<label>
Next Steps
<input type="text" name="next_steps" v-model="next_steps">
</label>
<label>
Due Date
<input type="date" name="due_date" v-model="due_date">
</label>
<button type="submit">Submit</button>
</form>
</div>
</template>
<script>
//import axios from 'axios';
export default {
name: 'oppForm',
data() {
return {
company_name: '',
company_type: '',
lines_of_business: '',
client_type: '',
contract_type: '',
contact_name: '',
contact_number: '',
email_address: '',
opportunity_owner: '',
decision_maker: '',
annual_jobs: '',
average_fee: '',
annual_value: '',
next_steps: '',
due_date: ''
}
},
methods: {
SubmitOpp() {
// handle submission
},
populateFormFields(fieldData){
console.log('hi');
// console.log(fieldData);
this.company_name = fieldData.company_name;
this.company_type = fieldData.company_type;
this.lines_of_business = fieldData.lines_of_business;
this.client_type = fieldData.client_type;
this.contract_type = fieldData.contract_type;
this.contact_name = fieldData.contact_name;
this.contact_number = fieldData.contact_number;
this.email_address = fieldData.email_address;
this.opportunity_owner = fieldData.opportunity_owner;
this.decision_maker = fieldData.decision_maker;
this.annual_jobs = fieldData.annual_jobs;
this.average_fee = fieldData.average_fee;
this.annual_value = fieldData.annual_value;
this.next_steps = fieldData.next_steps;
this.due_date = fieldData.due_date;
},
closeModal(){
this.modalVisability = !this.modalVisability;
}
}
}
</script>
最佳答案
最好的方法是直接在 props 中传递要更新的实体:
<UpdateForm :post="post" v-if="updateFormVisibility"/>
然后在 UpdateForm.vue 的 created Hook 中执行所有需要的逻辑。
请注意，您将不再需要引用，并且您的组件将不再依赖于调用函数的人。
关于javascript - Vue.js 使用点击事件填充模式上的表单字段值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60849169/