如何使用多种形式的vue搜索选择

Question

我想以多种形式显示产品的选择选项。但是问题是，当我在其中一个表单中选择一个选项时，其他选择表单也会更改。

要使其独特，我该怎么做？

这是我尝试的

我的选择表格

<tr v-for="(adddiagnosilom, index) in adddiagnosis" :key="adddiagnosilom.value">
    <td>{{ adddiagnosilom.value }}</td>
    <td>{{ adddiagnosilom.CodeID }}</td>
    <td>{{ adddiagnosilom.text }}</td>
    <td>
        <ListSelect :list="optionProduct"
             option-value="value"
             option-text="text"
             :selected-item="itemproduct[index]"
             placeholder="select product"
             @select="onSelectProduct">
        </ListSelect>
    </td>
    <td>
        <input class="form-control" placeholder="0" v-model="adddiagnosilom.ordered">
    </td>
    <td>
        <input class="form-control" placeholder="0" v-model="adddiagnosilom.price">
    </td>
    <td>{{ adddiagnosilom.sum = adddiagnosilom.ordered * adddiagnosilom.price }}</td>
</tr>

我的变量

data() {
    return {
      adddiagnosis: {},
      itemproduct: [
        { value: '', text: '' }
     ],
    }
}

我的选择方法

onSelectProduct (itemproduct) {
    this.itemproduct = itemproduct
},

这是屏幕截图

当我更改其中一项时，所有选择选项都会更改。我只想更改我更改的选择表单，而不是全部更改。

Answer 1

制作itemproduct一个数组，然后绑定到itemproduct[index]而不是itemproduct。然后，您将得到一个数组，其中每个选择框的值都作为单独的索引。