vue要怎么修改循环绑定的值呢？

Question

<div  v-for="point in points"
      :key="point.id">
    <input v-model="point.name"/>
    <input v-model="point.value"/>
</div>

<script>

export default {
    props: {
       points: {
          type: Array
       }
    }
}
</script>

如上图所示，传入points数组，里层一旦修改输入框的值就会报错[vuex] do not mutate vuex store state outside mutation handlers，这是因为props对象是不可修改的，那要怎么改呢？

Answer 1

推荐你在组件内部的data函数中创建个变量进行接收props传入的值，记得使用深拷贝，或者对props的数据进行双向绑定，在model函数中进行注册列如

model:{
props:"你得变量名"，
event:"change"
}

还需要再methods中进行emit

changevalue(){
this.$emit('change',要更新的值)
}

请参考

Answer 2

1.用computed计算属性的set和get对传入的props做代理
2.用toRef做代理
3.用v-model:xx做双向绑定
4.用defineModel简化defineProps和defineEmit