如何在 Vuex 存储中使用 v-model 和 v-for 字符串数组？

Question

我试图在 Vuex 商店中为数组设置值，但遇到了错误

VueCompilerError: v-model cannot be used on v-for or v-slot scope variables because they are not writable.

有什么办法可以实现吗？（没有在组件中创建 Vuex 模型数组的本地副本）

我的component.vue模板

<q-input v-for="phone, index  in CompanyPhones" :key="index" v-model="phone" mask="(##) ### ## ##" stack-label label="Phone" />

我的component.vue脚本

setup () {
    const $store = useStore()
 const CompanyPhones = computed({
      get: () => $store.getters['CompanySettingsModule/getCompanyPhones'],
      set: (val) => {
        $store.commit('CompanySettingsModule/setCompanyPhones', val)
      }
    })
 return {  CompanyPhones, }
}

Vuex 模块state.ts

function state (): CompanySettingsInterface {
  return {
    CompanyPhones: ['', '', ''],
  }
}

Vuex模块mutations.ts函数

setCompanyMails (state: CompanySettingsInterface, val)  { state.CompanyMails = val },

Vuex模块getters.ts函数

getCompanyPhones (state: CompanySettingsInterface)  { return state.CompanyPhones  },

Answer 1

问题是您的计算 getter/setter 只接受数组，并且更新嵌套值（如 companyPhones[index]）将具有与 Vue 的标准反应性相同的限制。基本上意味着只要直接更新子项，您就必须用自身的克隆替换数组。你可以用一种方法来做到这一点：

//script
methods: {
  updateCompanyPhone(v, index) {
    const { companyPhones } = this; // destructuring ES6 syntax
    companyPhones[index] = v;
    this.companyPhones = companyPhones;
  }
}

//template
<q-input v-for="phone, index  in CompanyPhones" :key="index" :model-value="phone" @update:model-value="v => updateCompanyPhone(v, index)" mask="(##) ### ## ##" stack-label label="Phone" />

由于 v-model 只是语法糖，您可以将其解构为 :model-value+@update:model-value (Vue3) 它所代表的内容并更好地控制它的作用。

如果这种模式经常重复出现，您可以编写一个高阶组件来维护一个具有嵌套值的数组（通过 value prop 和 update:value emit，因此它适用于 v-model），有一个插槽为其提供自定义表单（字段）以更新其嵌套值（也许一些 splice/push 函数将 add/remove 项添加到数组）。

如何在 Vuex 存储中使用 v-model 和 v-for 字符串数组？

How to use v-model with v-for array of strings in Vuex store?

typescript

vue.js

vuex