vue3 在 v-for 中实现双向绑定

在 vue3 中，如果在 v-for 中直接给子组件双向绑定数据，会报：

这是因为我们使用 v-for 将一个数组循环出来，每一个数据都应该是只读的。此时，我们如果需要修改数组内的数据，应该使用下标：

<template v-for="(item, index) in dataList" :key="item.id">
    // 错误写法 <ChildComponent v-model="item" />  <!-- 这样写会报错 -->
    <ChildComponent v-model="dataList[index]" /> <!-- 需要这样写 -->
</template>

如果不保证数组一定有值，则会报找不到下标的错误，此时需要在外面套一层判断即可：

<template v-if="dataList.length > 0">
    <template v-for="(item, index) in dataList" :key="item.id">
        <!-- 省略内容 -->
    </template>
</template>