Vue3，响应式双向绑定失败

Question

Vue3，响应式双向绑定失败。
reactive创建一个对象twoObject ，对象中存在一个集合list。for循环表单时，list中的某个对象的属性score无法双向绑定，DOM上输入后，并未更新到js

<script lang="ts" setup>
const twoObject = reactive({
  list: [
    {
      id: 1,
      name: "单选1",
      score: 0,
    },
    {
      id: 2,
      name: "单选2",
      score: 0,
    }
   ]
})

const submit = () => {
  console.log(oneList)
}

function setFormRef(el: any, index: number) {
  console.log(el)
  if (el) {
    formRef.value[index] = el;
  }
}
</script>
<template>
  <a-card class="questionnaire-item-card">
    <a-form :model="twoObject" style="width: 100%" layout="inline">
      <div v-for="(option, index) in twoObject.list" :key="option.id" class="questionnaire-option-item">

        <a-form-item :ref="(el: any) => setFormRef(el, index)" style="display: inline"
          :name="['twoList', index, 'score']" :label="option.name"
          :rules="[{ required: true, message: '请填写对应选项分数', trigger: 'change' }]">

          <a-input-number v-model:value="option.score" :precision="0" allow-clear placeholder="请输入" />
        </a-form-item>
      </div>

    </a-form>
    <a-button @click="submit">保存</a-button>
  </a-card>
</template>

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

在 Vue 3 中使用 reactive 系统创建响应式对象时，确保双向绑定正常工作需要遵循一些规则。从你提供的代码来看，问题可能出在 v-model:value 的使用上。Vue 3 推荐使用 v-model 而不是 v-model:value，因为 v-model 已经是合成属性，它内部已经包含了 value 和 "update:value" 事件监听器。

下面是一些可能帮助你解决问题的步骤：

1. 使用 v-model 而不是 v-model:value： 在 Vue 3 中，你应该使用 v-model 而不是 v-model:value。v-model 会自动寻找内部的 value 属性和 input 事件。

2. 确保 a-input-number 组件支持 v-model： 检查 a-input-number 组件是否支持 v-model。如果它不支持，你需要使用其他支持 v-model 的组件，或者自定义组件以支持 v-model。

3. 使用 .sync 修饰符（如果组件不支持 v-model）： 如果 a-input-number 不支持 v-model，你可以尝试使用 .sync 修饰符，如下所示：

   <a-input-number :value="option.score" @change="val => option.score = val" />
   

4. 检查 a-form 和 a-form-item 的使用： 确保 a-form 和 a-form-item 是正确配置的，并且它们的 model 属性与你的响应式数据结构相匹配。

5. 检查是否有其他 JavaScript 错误或 Vue 警告： 打开浏览器的开发者工具，查看控制台是否有错误或警告信息，这可能会提供问题的原因。

6. 确保组件的 ref 是正确设置的： 你的 setFormRef 函数看起来是想设置一个 ref 对应到每个表单项，确保这部分逻辑没有错误。

7. 使用 Vue Devtools 检查响应式数据： 使用 Vue Devtools 来检查 twoObject 对象和它的 list 数组，看看 score 是否真的没有更新。

如果上述步骤都不能解决问题，你可能需要提供更多的信息，或者检查是否有其他代码或配置影响了数据的响应性。此外，确保你使用的 Vue 版本和相关库（如 Ant Design Vue）是最新的，以避免兼容性问题。

目前我没有提供具体的参考链接，但你可以查看 Vue 3 的官方文档和 Ant Design Vue 的文档来获取更多信息：

• Vue 3 官方文档：https://v3.vuejs.org/
• Ant Design Vue 文档：https://vue.ant.design/docs/vue/introduce/

希望这些建议能帮助你解决问题！如果还有其他问题，随时告诉我。