Vue2/Vuetify1.5：复选框选择显隐文本框出现重复字段问题

问题原因 #

你遇到的文本框重复问题，核心是模板渲染时没有关联选中产品与对应文本框的归属关系：

• 模板中第二个v-for循环的是整个rowItems对象，而非当前选中产品对应的字段集合，导致每个选中产品下方都会渲染所有产品的文本框，造成重复显示。
• 另外showFields方法每次都循环所有选中产品重复赋值，逻辑冗余且没必要。

修复步骤 #

1. 模板调整：将文本框的循环对象从rowItems改为rowItems[product]，确保每个选中产品只渲染自己对应的文本框。
2. 逻辑优化：修改showFields方法，直接根据当前选中/取消选中的产品来维护rowItems，无需循环全部选中项；同时在取消选中时清理对应的数据，避免冗余。

修改后的完整代码 #

HTML部分

<v-container grid-list-lg>
    <v-layout row wrap>
      <v-flex xs12>
        <div v-for="(item, index) of products" :key="index">
        <v-checkbox 
          hide-details
          v-model="selectedProducts"
          :label="item.name"
          :value="item.name"
          @change="showFields(item.name, $event)"
        >
        </v-checkbox>
      </div>
      </v-flex>
    </v-layout>
    <v-layout row wrap v-for="(product, index) of selectedProducts" :key="index">
      <v-flex xs12>
        <h4>{{product}}</h4>
      </v-flex>
      <v-flex xs12 v-for="(field, fieldIndex) of rowItems[product] || []" :key="fieldIndex">
        <v-text-field
          label="Price"
          v-model="field.price"
        ></v-text-field>
      </v-flex>
    </v-layout>
  </v-container>

JS部分

new Vue({
  el: '#app',
  data() {
    return {
      products: [
        {
          name: 'Item A',
          id: 1,
          price: 10
        },
        {
          name: 'Item B',
          id: 2,
          price: 20
        },
        {
          name: 'Item C',
          id: 3,
          price: 30
        },
      ],
      rowItems: {},
      selectedProducts: []
    }
  },
  methods: {
    showFields(productName, isChecked){
      if(isChecked){
        // 选中时初始化当前产品的价格字段
        this.$set(this.rowItems, productName, [{ price: '' }])
      } else {
        // 取消选中时删除对应的数据
        delete this.rowItems[productName]
      }
    }
  }
})

额外说明 #

• 使用this.$set是因为Vue无法自动检测对象属性的添加，确保数据响应式更新。
• 取消选中时删除rowItems中的对应键，避免无用数据残留。

内容的提问来源于stack exchange，提问作者Fabio Zanchi