Vue.js 使用点击事件在模态框上填充表单字段值
Posted
技术标签:
【中文标题】Vue.js 使用点击事件在模态框上填充表单字段值【英文标题】：Vue.js populate form fields values on modal using click event 【发布时间】：2020-07-06 00:26:10 【问题描述】：我有一个 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" 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>
【问题讨论】：
【参考方案1】：最好的办法是直接在props中传递要更新的实体：
<UpdateForm :post="post" v-if="updateFormVisibility"/>
然后在 UpdateForm.vue 的 created 钩子中执行所有需要的逻辑。
请注意，您将不再需要 refs，并且您的组件将不依赖于调用函数的人。
【讨论】：
这是否意味着在 AppSummary 中的 data() 中创建一个帖子变量，然后单击将帖子数据附加到它？ 可以，从后端获取后分配以上是关于Vue.js 使用点击事件在模态框上填充表单字段值的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Bootstrap 和 thymeleaf 在模态内部的表单中填充值？