Vue 3中如何在v-for循环中结合props使用v-model

要在v-for循环中结合props实现v-model双向绑定，核心是让每个循环项对应父组件传入的modelValue数组中的某一项，通过修改数组对应元素并触发update:modelValue事件完成双向同步。以下是两种可行方案：

方案一：使用数组型计算属性 #

适合希望保持v-model语法简洁的场景，通过计算属性包装整个数组实现整体双向绑定：

<script setup>
import { computed } from 'vue';

const props = defineProps({
  modelValue: {
    type: Array,
    required: true,
    default: () => []
  },
  data: {
    type: Object,
    required: true
  },
  maxLength: Number,
  required: Boolean
});

const emits = defineEmits(['update:modelValue']);

// 包装数组的计算属性，支持双向绑定
const fieldValues = computed({
  get() {
    return props.modelValue;
  },
  set(newValues) {
    emits('update:modelValue', newValues);
  }
});
</script>

<template>
  <Mentionable
    v-for="(field, index) in props.data.placeholder"
    :key="field.id || index" <!-- 优先用字段唯一标识，无则用索引 -->
    :keys="['#']"
    :items="props.data.items"
  >
    <textarea
      v-model="fieldValues[index]"
      :disabled="!props.data.loaded"
      :placeholder="field.placeholder"
      :maxlength="props.maxLength"
      :required="props.required"
    />
  </Mentionable>
</template>

说明：

• 父组件传入的modelValue必须是数组，且长度需与props.data.placeholder一致，避免索引越界
• 修改任意输入框时，计算属性会将更新后的完整数组通过update:modelValue事件传递给父组件，完成同步

方案二：手动绑定值与输入事件 #

适合需要精细控制逻辑的场景，直接通过:value绑定值、@input触发更新：

<script setup>
const props = defineProps({
  modelValue: {
    type: Array,
    required: true,
    default: () => []
  },
  data: {
    type: Object,
    required: true
  },
  maxLength: Number,
  required: Boolean
});

const emits = defineEmits(['update:modelValue']);

// 处理输入事件，更新对应索引的数组元素
const handleInput = (event, index) => {
  // 拷贝原数组，避免直接修改props
  const updatedValues = [...props.modelValue];
  updatedValues[index] = event.target.value;
  emits('update:modelValue', updatedValues);
};
</script>

<template>
  <Mentionable
    v-for="(field, index) in props.data.placeholder"
    :key="field.id || index"
    :keys="['#']"
    :items="props.data.items"
  >
    <textarea
      :value="props.modelValue[index]"
      @input="handleInput($event, index)"
      :disabled="!props.data.loaded"
      :placeholder="field.placeholder"
      :maxlength="props.maxLength"
      :required="props.required"
    />
  </Mentionable>
</template>

说明：

• 通过扩展运算符[...props.modelValue]拷贝原数组，遵循Vue中不能直接修改props的规则
• 在handleInput中更新对应索引的元素后，通过emit通知父组件更新modelValue

内容的提问来源于stack exchange，提问作者Utku Demir