Vue中如何在v-for循环内创建虚拟变量解决v-model失效问题

一、先修复v-model失效的根本原因 #

你当前的代码里，list是普通数组，未被Vue响应式系统包裹，且直接在数组元素中存放ref对象的方式，会导致v-model绑定异常。正确做法是把整个数组转为响应式，数组元素的model属性用普通值或结合reactive使用：

正确的响应式数组写法 #

import { reactive, ref } from 'vue'

// 方式1：用reactive包裹数组，元素为普通对象（model存普通值）
const list = reactive([
  { model: '', data: 'Whatever things' },
  { model: '', data: '...' },
])

// 方式2：若需用ref，数组元素用reactive对象包裹，model为ref
const list = reactive([
  { model: ref(''), data: 'Whatever things' },
  { model: ref(''), data: '...' },
])

修改后，v-for中的v-model="i.model"即可正常工作。

二、循环内创建“虚拟”临时变量（仅渲染初始值，无需双向绑定） #

如果确实不需要v-model双向绑定，仅需渲染初始值，可采用以下几种方式：

1. 用:value替代v-model #

直接绑定初始值，放弃双向绑定，这是最简单的方案：

<input
  v-for="i in list"
  :value="i.model"
  <!-- 无需v-model，后续不同步数据 -->
  ...其他属性
>

对MazSelect同样适用：

<MazSelect
  v-for="i in list"
  :value="i.model"
  <!-- 无需监听input事件 -->
>
</MazSelect>

2. 在setup中创建临时映射对象 #

若需要临时响应式变量（渲染时可临时修改，不影响原数组），可在setup里创建对象存储每个列表项的临时ref：

import { ref, reactive } from 'vue'

const list = reactive([
  { model: '初始值1', data: 'Whatever things' },
  { model: '初始值2', data: '...' },
])

// 用索引作为key存储临时变量（若列表不会重排序），也可用列表项唯一标识
const tempModels = {}
list.forEach((item, index) => {
  tempModels[index] = ref(item.model)
})

模板中使用：

<input
  v-for="(i, index) in list"
  v-model="tempModels[index]"
  ...其他属性
>

临时变量与原数组完全隔离，初始化后修改不会影响原list。

3. 封装循环项为独立组件 #

若逻辑复杂，可把每个循环项封装成子组件，在组件内部维护临时ref：

<!-- 子组件 ItemInput.vue -->
<template>
  <input v-model="tempModel" ...其他属性 />
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps(['initialValue'])

const tempModel = ref(props.initialValue)
</script>

父组件中使用：

<ItemInput
  v-for="i in list"
  :initial-value="i.model"
  ...其他属性
/>

这种方式逻辑隔离清晰，每个子组件独立管理自己的临时变量。

三、修复MazSelect的[object Object]问题 #

你之前用@input="i.model = $event.target.value"报错，是因为MazSelect的input事件返回的是选中值本身，而非原生事件对象，无需取target.value：

<MazSelect
  v-for="i in list"
  :value="i.model"
  @input="i.model = $event"
>
</MazSelect>

若使用v-model，只要list是响应式的，直接写v-model="i.model"即可正常工作。

内容的提问来源于stack exchange，提问作者Andrew Baker