v-model 不能用在 v-for 上

Question

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>

最佳做法是什么？反应对象转移

Answer 1

好的，现在的情况是变量“服务”是虚拟的。它不存在，它只是你真实对象“服务”在某个时刻（迭代）的一部分。

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

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

v-model 不能用在 v-for 上

v-model cannot be used on v-for

eslint

vuejs3