Forms 如何在Vue中正确初始化表单数据
因此,我有一个组件,它正在呈现一个表单,并且它还使用从ajax请求接收的数据预填充字段 我的问题是,我不仅希望能够编辑字段,还希望能够同时添加要提交的新字段,因此,我尝试将预填充的数据和新数据初始化到要与ajax请求一起提交的同一对象中。在我当前的设置中,表单数据在呈现表单之前不会一直填充到字段中 这是表单模板Forms 如何在Vue中正确初始化表单数据,forms,vue.js,vuex,v-model,Forms,Vue.js,Vuex,V Model,因此,我有一个组件,它正在呈现一个表单,并且它还使用从ajax请求接收的数据预填充字段 我的问题是,我不仅希望能够编辑字段,还希望能够同时添加要提交的新字段,因此,我尝试将预填充的数据和新数据初始化到要与ajax请求一起提交的同一对象中。在我当前的设置中,表单数据在呈现表单之前不会一直填充到字段中 这是表单模板 <form @submit.prevent="editThisWorkflow" class="d-flex-column justify-content-center" >
<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>
这是提交数据的存储方法
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函数
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
}
},
data属性不接受这一点,我通常在这个问题中使用箭头函数,因为它禁止我使用它,也禁止我的团队在数据中使用它。 在数据表中声明所有必要的项目以保持反应性,并在页面的后面指定值
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
}
},
})
我解决这个问题的方法比这里介绍的大多数解决方案都要简单。由于VUEJ的生命周期,我发现很难从
这个.store.state获取数据。给v模式赋值是不可能的,因为
解决方案
要使用从ajax请求收到的数据预填充字段,例如电子邮件类型的输入字段,我做了如下操作
1st.我将ajax请求的输出保存在应用程序的存储(Cookies)中-它可以是本地存储或会话,具体取决于您的需要
2。我用应用程序存储中的数据填充了我的()。我每次重新加载页面时都会这样做
3rd.而不是将数据绑定到Vuejs生命周期中的v-model
,或使用html输入的值属性(
)。我通过使用来自Vuex存储的数据填充html的占位符属性来预先填充输入,如下所示:
因此数据装载正确,但不一致。希望我能正确地解释这一点,但当我取消表单并选择其他工作流进行编辑时,它会使用以前的工作流数据填充表单。但是,如果我再次取消并重新选择相同的工作流,它将正确填充表单…因此数据将正确装载,但不一致。希望我能正确地解释这一点,但当我取消表单并选择其他工作流进行编辑时,它会使用以前的工作流数据填充表单。但是,如果我再次取消并重新选择相同的工作流,它将正确填充表单…您如何将此方法称为简单?
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
}
},
})