<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input v-model="inputValues[index]" type="text">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [1, 2, 3],
      inputValues: [] // 用于存储输入框的值
    };
  },
  computed: {
    // 为每个输入框创建一个计算属性
    inputValues() {
      return this.items.map(() => '');
    }
  }
};
</script>

<template>
  <div>
    <div v-for="(item, index) in items" :key="item.id">
      <input v-model="item.value" type="text">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, value: '' },
        { id: 2, value: '' },
        { id: 3, value: '' }
      ]
    };
  }
};
</script>

<template>
  <div>
    <my-input v-for="(item, index) in items" :key="index" v-model="item.value"></my-input>
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  components: {
    MyInput
  },
  data() {
    return {
      items: [1, 2, 3].map(() => ({ value: '' }))
    };
  }
};
</script>