当数组 vue3 的一部分时更新模型

Question

当模型处于该数组的循环中时，如何更新该数组：

例如我有一个数组

const numbers = ref([1,2,3]);

我有一个使用值作为模型循环遍历数组的组件：

<test v-for="(number, index) in numbers" :key="`${index}-${number}`" :number="number" @update:number="updateNumbers"></test>

如果我更新该组件中的数字：

emit('update:number', 5);

为什么它不更新我的原始数组？

完整代码：

//Main page
<script>
  import {
    defineComponent,
    ref
  } from 'vue'
  import Test from './Test.vue'
  export default defineComponent({
    name: 'app',
    components: {
      Test,
    },
    setup() {
      const numbers = ref([1, 2, 3]);
      const updateNumbers = () => {
        console.log(numbers.value);
      };

      return {
        numbers,
        updateNumbers
      };
    },
  });
</script>

<template>
  <test v-for="(number, index) in numbers" :key="`${index}-${number}`" :number="number" @update:number="updateNumbers"></test>
</template> 



// Child Compnent
<script>
  import {
    defineComponent,
    ref
  } from 'vue'
  export default defineComponent({
    name: 'test',
    props: {
      number: {
        default: () => 0,
        required: true,
        type: Number,
      },
    },
    emits: [
      'update:number',
    ],
    setup(props, {
      emit
    }) {
      const updateNumber = () => {
        emit('update:number', 5);
      };

      return {
        updateNumber
      };
    },
  });
</script>

<template>
  <div @click="updateNumber">click {{ number }}</div>
</template>

vue Playground 上的工作示例

如果单击文本，我希望原始数组的值在 console.log 中被替换为 5？

Answer 1

看起来您不能在同一元素上同时使用

v-for

和

v-model

。

如果我在父元素上使用带有索引的

v-for

，那么我可以将数组的索引属性作为

v-model

:

传递给子元素

<div v-for="(number, index) in numbers" :key="`${index}-${number}`">     
    <test  v-model:number="numbers[index]" @update:number="updateNumbers"></test>
</div>

更新了 vue 游乐场

Answer 2

您的代码工作正常，事件有效负载已正确传递，您只是对它没有执行任何操作。

如果您的目的是模拟

v-model

行为，则必须使用

modelValue

作为属性：https://vuejs.org/guide/components/v-model.html

请参阅此处更新的游乐场