как использовать поиск 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.Тогда у вас будет массив со значением каждого поля выбора в виде отдельного индекса.