所以我有一个组件,它呈现一个表单,它也是预填充 AJAX 请求接收到的数据的字段。
我的问题是,我希望不仅能够编辑字段,而且还可以同时添加新的字段提交,因此,我试图将我的预填充数据和新数据初始化为同一个Object,以便与我 AJAX 请求一起提交。
这是表单模板
<form @submit.prevent="editThisWorkflow" class="d-flex-column justify-content-center" >
<div>
<input type="text" v-model="workflowData.workflow">
</div>
<div >
<div v-for="object in workflowData.statuses" :key="object.id">
<input type="text" v-model="object.status">
</div>
<div v-for="(status, index) in workflowData.newStatuses" :key="index">
<input type="text" placeholder="Add Status" v-model="status.value">
<button type="button" @click="deleteField(index)">X</button>
</div>
<button type="button" @click="addField">
New Status Field
</button>
</div>
<div>
<div>
<button type="submit">Save</button>
<router-link :to="{ path: '/administrator/workflows'}" >Cancel</router-link>
</div>
</div>
</form>
这是剧本
data() {
return {
workflowData: {
id: this.$store.state.workflow.id,
workflow: this.$store.state.workflow.workflow,
statuses: this.$store.state.workflow.statuses,
newStatuses: []
},
workflowLoaded: false
}
},
computed: {
...mapGetters(['workflow']),
},
methods: {
...mapActions(['editWorkflow']),
editThisWorkflow() {
this.editWorkflow({
id: this.workflowData.id,
workflow: this.workflowData.workflow,
statuses: this.workflowData.statuses,
newStatuses: this.workflowData.newStatuses
})
},
addField() {
this.workflowData.newStatuses.push({ value: ''});
},
deleteField(index) {
this.workflowData.newStatuses.splice(index, 1);
}
这是提交数据的store方法
editWorkflow(context, workflowData) {
axios.patch('/workflowstatuses/' + workflowData.id, {
workflow: workflowData.workflow,
statuses: workflowData.statuses,
newStatuses: workflowData.newStatuses
})
.then(response => {
context.commit('editWorkflow', response.data)
})
.catch(error => {
console.log(error.response.data)
})
},
我的问题就在这里
data() {
return {
workflowData: {
id: this.$store.state.workflow.id,
workflow: this.$store.state.workflow.workflow,
statuses: this.$store.state.workflow.statuses,
newStatuses: []
},
workflowLoaded: false
}
},
有没有更好的方法来设置这个部分??
workflowData: {
id: this.$store.state.workflow.id,
workflow: this.$store.state.workflow.workflow,
statuses: this.$store.state.workflow.statuses,
newStatuses: []
},
3条答案
按热度按时间bihw5rsg1#
如果你只需要给你的表单赋值一次,那么你可以使用mounted函数。
0yg35tkg2#
数据属性不接受这个,我通常在这个问题中使用箭头函数,因为它禁止我使用这个,也禁止我的团队在数据中使用这个。声明数据中所有必要的项以保持React性,并在页面的挂载中分配值。
irlmq6kh3#
我解决这个问题的方法比这里提出的大多数解决方案都要简单。我发现由于Vuejs的生命周期,很难从
this.$store.state
获取数据。而且给v-mode
赋值也是不可能的,因为"v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth."解决方案
要用 AJAX 请求接收到的数据预填充字段,例如输入电子邮件类型的字段我做了如下操作。
**1st.**我保存了我 AJAX 请求的输出在应用程序的存储(Cookie)-它可以是本地存储或会话,这取决于什么是适合你。
第二次。我使用应用存储中的数据填充了我的Vuex's store(single source of truth)。我每次重新加载页面时都会这样做。
3rd.而不是在Vuejs生命周期中将数据绑定到
v-model
,或者使用html input(<input type="email" value="email@example.com">
)的value属性。我通过使用来自Vuex存储的数据填充html的placeholder属性来预填充输入,如下所示: