我有一个带有一些表单验证的组件。这是一个多步骤结帐表格。下面的代码是第一步。我想验证用户是否输入了一些文本,将他们的名字存储在全局状态中,然后发送到下一步。我正在使用vee- validate和 vuex
<template> <div> <div class='field'> <label class='label' for='name'>Name</label> <div class="control has-icons-right"> <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last"> <span class="icon is-small is-right" v-if="errors.has('name')"> <i class="fa fa-warning"></i> </span> </div> <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p> </div> <div class="field pull-right"> <button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button> </div> </div> </template> <script> export default { methods: { nextStep(){ var self = this; // from baianat/vee-validate this.$validator.validateAll().then((result) => { if (result) { this.$store.dispatch('addContactInfoForOrder', self); this.$store.dispatch('goToNextStep'); return; } }); } }, computed: { name: function(){ return this.$store.state.name; } } } </script>
我有一个用于处理订单状态和记录名称的商店。最终,我想将所有信息从多步表单发送到服务器。
export default { state: { name: '', }, mutations: { UPDATE_ORDER_CONTACT(state, payload){ state.name = payload.name; } }, actions: { addContactInfoForOrder({commit}, payload) { commit('UPDATE_ORDER_CONTACT', payload); } } }
当我运行此代码时,我收到一个错误Computed property "name" was assigned to but it has no setter.
Computed property "name" was assigned to but it has no setter.
如何将名称字段中的值绑定到全局状态?我希望这是持久的,这样即使用户返回一步(单击“下一步”之后),他们也会看到他们在这一步输入的名称
如果你要进行v-model计算,它需要一个setter。无论您希望它对更新的值做什么(可能将其写入$store,考虑到这是您的 getter 从中提取的内容),您都可以在 setter 中执行此操作。
v-model
$store
如果通过表单提交将其写回商店,您不想这样做v-model,您只想设置:value.
:value
如果你想有一个中间状态,它保存在某个地方但不覆盖$store直到表单提交中的源,你需要创建这样一个数据项。