初学vue3遇到的错误, 问题描述和解决方法在代码中

VBindModel.vue

<script setup lang="ts">import { ref } from 'vue';
import MustVBindComp from './VBindModelComp.vue';
let list = ref<any[]>([{ 'value': 71 }, { 'value': 72 }]);
</script>
<template>
    <!-- 
        <MustVBindComp v-for="(item,idx) in list" v-model:idx="idx" v-bind:data="item" v-model:value="item.value"></MustVBindComp>
        <MustVBindComp v-for="(item,idx) in list" v-bind:idx="idx" v-model:data="item" v-model:value="item.value"></MustVBindComp>
        以上写法会报错如下
        ```v-model cannot be used on v-for or v-slot scope variables because they are not writable. ```
        原因 item 和 idx 都不可以直接通过 v-model传递给组件, 因为这俩是只写的变量, 
        解决方法:
            1. 用v-bind 绑定 item和idx   
            2. v-model可以 绑定 item中的变量 例如 item.value
    -->
    
    <!-- 正确写法如下 -->
    <MustVBindComp v-for="(item,idx) in list" v-bind:idx="idx" v-bind:data="item" v-model:value="item.value"></MustVBindComp>

</template>

VBindModelComp.vue

<script setup lang="ts">
defineProps({
  idx: Number,
  data: Object,
  value: Number,
})
</script>
<template>
  <hr/>
    <h4>{{idx}}</h4>
    <h5>{{data?.value}}</h5>
    <h6>{{value}}</h6>
  <hr/>
</template>