Nuxt项目中如何为Vuex存储的动态表单字段绑定v-model更新数值

实现方案 #

先修复两个隐藏问题：

1. 重复对象引用问题：你当前每次addField都是传入同一个calculationFields对象引用，后续修改任意字段的属性都会同步到所有字段，需要在存入store时拷贝为新对象。
2. v-for的key值问题：你当前用field作为key，相同对象引用会导致Vue渲染异常，建议为每个字段新增唯一ID作为key。

动态v-model绑定（最直观方案） #

不要为每个动态字段单独定义计算属性，直接拆分v-model的语法糖为「属性绑定+事件监听」，配合索引即可实现精准更新：

1. 模板部分修改

根据你使用的Vue版本选择对应写法：

Vue3写法

<InputCustomPlaceholder 
  type="number" 
  :is-required="true" 
  :input-id="`calculation-${index}`" 
  :model-value="getCalculationFields()[index].qty"
  @update:model-value="handleQtyChange(index, $event)"
  :input-name="`calculation-${index}`" 
  label-text="" 
  placeholder-text="Add pieces" 
  custom-placeholder-text="pcs" 
  extraclass="flex-1 no-margin" 
/>

Vue2写法

<InputCustomPlaceholder 
  type="number" 
  :is-required="true" 
  :input-id="`calculation-${index}`" 
  :value="getCalculationFields()[index].qty"
  @input="handleQtyChange(index, $event)"
  :input-name="`calculation-${index}`" 
  label-text="" 
  placeholder-text="Add pieces" 
  custom-placeholder-text="pcs" 
  extraclass="flex-1 no-margin" 
/>

同时修改v-for的key配置：

<div v-for="(field, index) in getCalculationFields()" :key="field.id" class="flex-xs justify-between calculation-field">

2. 组件新增方法

methods: {
  handleQtyChange(index, value) {
    // 输入值转数字，兼容空输入场景
    const qty = Number(value) || 0
    this.$store.dispatch('quantity/updateFieldQty', { index, qty })
  }
}

3. Store部分修改

首先修改新增字段的mutation，解决对象引用重复问题，同时生成唯一ID：

UPDATE_ADD_ITEM(state, value) {
  // 浅拷贝原对象，新增唯一ID，避免引用重复
  const newField = { ...value, id: Date.now() }
  state.options.push(newField)
}

新增更新指定字段数量的mutation和action：

// action
updateFieldQty({ commit }, payload) {
  commit('UPDATE_FIELD_QTY', payload)
}

// mutation
UPDATE_FIELD_QTY(state, { index, qty }) {
  // Vue2需要用$set保证响应式，Vue3可直接写 state.options[index].qty = qty
  this.$set(state.options[index], 'qty', qty)
}

可选：用计算属性实现v-model写法 #

如果你更习惯用v-model的写法，可以写一个动态生成计算属性的方法：

methods: {
  getFieldModel(index) {
    return {
      get() {
        return this.getCalculationFields()[index].qty
      },
      set(value) {
        const qty = Number(value) || 0
        this.$store.dispatch('quantity/updateFieldQty', { index, qty })
      }
    }
  }
}

模板中直接绑定即可：

<InputCustomPlaceholder 
  v-model="getFieldModel(index)"
  <!-- 其他属性保持不变 -->
/>

内容的提问来源于stack exchange，提问作者Morten Hagh