在 Vue 组合 API 中使数组具有反应性答案

【问题标题】：Making an array reactive in vue Composition API在 Vue 组合 API 中使数组具有反应性
【发布时间】：2021-12-29 13:40:17
【问题描述】：

这看起来很简单，但我找不到答案。我有一个表格，所有输入都放在一个对象中。现在后端需要将表单对象包装在一个数组中。所以我有这个：

    <input
       class="input"
       placeholder="Serial #"
       v-model="form.serialNum"
    />
// etc for form

在

let form = reactive({
  eqpmntType: "",
  make: "",
  modelNum: "",
  // etc

所以我阅读了文档并了解反应函数是针对对象的，所以我尝试了 ref()：

let form = ref([{
  eqpmntType: "",
  make: "",
  modelNum: "",
  //etc
   }]

不幸的是，我失去了对表单输入的反应。我知道我可以在事后将表单对象包装在一个数组中并提交。我想知道是否有一种方法可以创建一个数组或者一个对象数组reactive。感谢您的澄清。

【问题讨论】：

标签： vuejs3 vue-composition-api vue-reactivity

【解决方案1】：

我认为您发起的form 是被动的，对我来说没有问题。也许这就是你使用它的方式。

例如，如果你想在form 中更改modelNum 的值，因为它现在是一个数组类型，请确保你这样做了：

form.value[0].modelNum = 123

在 input 元素中，v-model 应该是 v-model="form[0].modelNum" 也是因为数组类型。

尽管我不明白为什么后端要求您传递数组类型的参数，因为似乎 form 在数组中只包含 1 个对象。通常，在以下情况下，将采用数组类型的参数：

const form = ref([
  {
    eqpmntType: "1",
    make: "1",
    modelNum: "1"
  },
  {
    eqpmntType: "2",
    make: "2",
    modelNum: "2"
  },
  {
    eqpmntType: "3",
    make: "3",
    modelNum: "3"
  },
])

在这种情况下，您的input 必须不止一个，以便一个input 的每个v-model 将分别绑定每个modelNum。所以如果这个答案不能解决你的问题，我希望你能展示更多的代码和细节。

【讨论】：