v-model 不能用于 v-for答案

【问题标题】：v-model cannot be used on v-forv-model 不能用于 v-for
【发布时间】：2022-09-30 15:43:10
【问题描述】：

VueCompilerError: v-model 不能用于 v-for 或 v-slot 范围变量，因为它们不可写。为什么？

<template>
  <div v-for=\"service in services\" :key=\"service.id\">
    <ServicesItem v-model=\"service\"></ServicesItem >
  </div>
</template>
<script lang=\"ts\">
import ServicesItem from \"@js/components/ServicesItem.vue\"

export default defineComponent({
  components: { ServicesItem },
  setup() {
    const services = ref([
      {
        id: 1,
        name: \"Service 1\",
        active: false,
        types_cars: {
          cars: {},
          suv: {},
        },
      },
    ])

    return {
      services,
    }
  },
})
</script>

最佳实践是什么？反应式对象传输

标签： eslint vuejs3

【解决方案1】：

好的，所以发生的事情是变量“服务”是虚拟的。它不存在，它只是某个点（迭代）的真实对象“服务”的一部分。

如果您想将该迭代“附加”到您的组件，您需要提供一个真实的对象，在您的情况下，将这样做：

<div v-for="(service, i) in services" :key="service.id">
    <ServicesItem v-model="services[i]"></ServicesItem >
</div>

【讨论】：

【解决方案2】：

同样的问题，我已经用其他自定义道具更改了modelValue 道具，它对我来说很好用。老的：

const props = defineProps({
    modelValue: {
        type: Object,
        required: true
    }
})

新的：

const props = defineProps({
    field: {
        type: Object,
        required: true
    }
})

零件： <MyComponent :field="service"/>

代替 <MyComponent :v-model="service"/>

【讨论】：