所以我有一个组件来呈现表单，它还用从ajax请求接收的数据预填充字段。
我的问题是，我不仅希望能够编辑字段，还希望同时添加要提交的新字段，因此，我正试图将预填充的数据和新数据初始化到同一个对象中，以便通过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);
}
这是提交数据的存储方法
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: []
},
如果只需要将存储值分配给表单一次，那么就可以使用挂载函数。
mounted: function() {
this.id = this.$store.state.workflow.id
this.workflow = this.$store.state.workflow.workflow
this.statuses = this.$store.state.workflow.statuses
},
data() {
return {
workflowData: {
id: '',
workflow: '',
statuses: '',
newStatuses: []
},
workflowLoaded: false
}
},
数据属性不接受这一点，我通常在这个问题中使用箭头函数，因为它禁止我使用它，并禁止我的团队在数据中也使用它。声明数据中的所有必要项以保持反应性，并在页面的mounted中分配值。
mounted() {
this.workflowData.id = this.$store.state.workflow.id
this.workflowData.workflow = this.$store.state.workflow.workflow
this.workflowData.statuses = this.$store.state.workflow.statuses
},
data: () => ({
workflowData: {
id: '',
workflow: '',
statuses: '',
newStatuses: []
},
workflowLoaded: false
}
},
})
我解决这个问题的方法比这里提供的大多数解决方案都简单。由于Vuejs的生命周期，我发现很难从this.$store.state中获取数据。并且将值分配给CCD_ 2被证明是不可能的；v-model将忽略在任何表单元素上找到的初始值、选中或选定的属性。它将始终将Vue实例数据视为真理的来源">
解决方案
为了用从ajax请求接收的数据预填充字段，例如类型为电子邮件的输入字段，我按照如下操作。
第一我将ajax请求的输出保存在应用程序的存储(Cookie(中——它可以是本地存储或会话，具体取决于适合您的内容。
第二名我用应用程序存储中的数据填充了Vuex的存储(单一真相来源(。我每次重新加载页面时都会这样做。
第三名而不是在Vuejs生命周期中将数据绑定到v-model，或者使用html输入(<input type="email" value="email@example.com">(的值属性。I通过用来自Vuex商店的数据填充html的占位符属性来预先填充输入，如下所示：
<input v-model="form.input.email" type="email" name="email" v-bind:placeholder="store.state.user.data.email">