Hej,
tworzę generowanie dokumenty zamówienia sprzedaży. Mam dropdowna z wyborem towaru, pole input z ilością i przycisk dodaj.
Dodaję coś takiego:
export interface ISku {
id: number;
code: string;
name: string;
codeName: string;
uom: string;
quantity: number;
}
do tablicy
const orderPositions = ref<Array<ISku>>([]);
dodaje towar do zamówienia w taki sposób
const sku = ref<ISku>({
id: 0,
code: "",
name: "",
codeName: "",
uom: "",
quantity: 0,
});
// ta metoda rusza gdy wybiorę towar z dropdowna
const pickSku = (value) => {
let item = skus.value.filter((item) => {
return item.id == value;
});
item[0].quantity = 1;
sku.value = item[0];
};
// tutaj gdy klik w button "dodaj pozycje"
const addOrderPosition = () => {
if (sku.value?.quantity) sku.value.quantity = skuQuantity.value;
orderPositions.value.push(sku.value);
};
wyświetlam tak
<tbody>
<tr v-for="(row, index) in orderPositions" :key="index">
<td>{{ row.code }}</td>
<td>{{ row.name }}</td>
<td>
<el-input-number
v-model="row.quantity"
/>
</td>
<td>
<a @click="deleteOrderPosition(row.id)" class="menu-link px-3">
<i class="fa fa-trash text-danger"></i>
</a>
</td>
</tr>
</tbody>
problem mam taki, że gdy dodam dwa razy ten sam towar i zmieniam jednemu z nich wartość quantity w inpucie w tabelce powyżej. Steruje obiema wartościami jednocześnie.
Próbowałem do ISku dodać property z jakimś generowanym GUIDEM ale nie dało rezultatów. Szybko robiłem i chyba zrobię to raz jeszcze dla testu.
GUID = jakiś id unikalny wiersza by się przydał również dla operacji usunięcia pozycji. Bo w tej chwili szukając po sku.id usuwam 1szy znaleziony co w przypadku 2 takich samych nie da rady działać poprawnie.
Zresztą użycie w pętli :key="index"
- próbowałem użyć tego.