前端 - 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

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

Answer 2

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

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

还需要再methods中进行emit

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

请参考