禁用/启用来自循环VueJS的每个项目的输入

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <input type="text" :disabled="isDisabled[index]" v-model="item.value">
      <button @click="toggleInput(index)">Toggle Input</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { value: 'Item 1' },
        { value: 'Item 2' },
        { value: 'Item 3' }
      ],
      isDisabled: [false, false, false]
    };
  },
  methods: {
    toggleInput(index) {
      this.isDisabled[index] = !this.isDisabled[index];
    }
  }
};
</script>

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

<script>
export default {
  data() {
    return {
      items: [
        { value: 'Item 1', disabled: false },
        { value: 'Item 2', disabled: true },
        { value: 'Item 3', disabled: false }
      ]
    };
  },
  computed: {
    isDisabled() {
      return (index) => {
        return this.items[index].disabled;
      };
    }
  }
};
</script>