vuetifyのv-selectで値を変更したときにどのselectが変更されたか知りたい

Question

ショッピングカートをnuxtを利用して作成しており、カートの編集画面でv-selectの変更場所を検知したいと考えております。
カートに入っている商品はstoreを使ってlocalStorageに保存しております。
保存されている商品をv-forを利用して、商品の一覧を表示させているのですが、
その表示された商品の数量を変更するために、v-selectを利用しております。

<tr
  v-for="item in $store.cartItem"
  :key="`itemForm-${item.itemId}`"
>
  <td>{{ item.itemName }} </td>
  <td>
    <v-select
      :value="item.buyNum"
      :items="buyNumItems"
      @change="changeBuyNum"
    >
  </td>
</tr>

ここのbuyNumItemsは1～20の数字を数量として選択できるようにしています。
v-modelを使えば楽なのですが、storeで設定している値のため、直接変更しようとするとエラーがでるため、
v-modelは使わずvalueを利用しております。

この状態で、下記のようにすると、変更した値は取得できるのですが、
どこで変更された値かが判断できなたいため、storeの値を更新できずにいます。

changeBuyNum (num: number): void {
  console.log(num)
}

@changeのところで、changeBuyNum(item.itemId)等にしてIDを渡したり、v-forを(item, index)にして、changeBuyNum(index)とした場合には、変更した箇所を知らせることは出来るのですが、今度は変更した値が取得出来ません。

解決策をご存知の方ご教授頂ければ幸いです。

よろしくお願いいたします。

Answer 1

@changeのところで、changeBuyNum(item.itemId)等にしてIDを渡したり、v-forを(item, index)にして、changeBuyNum(index)とした場合には、変更した箇所を知らせることは出来るのですが、今度は変更した値が取得出来ません。

こちらの解決策についてですが、次のようにすると変更後のvalueとitemを識別するidを同時に取得することができます。

<v-select
  :value="item.buyNum"
  :items="buyNumItems"
  @change="(value) => changeBuyNum(value, item.itemId)"
>
</v-select>

  methods: {
    changeBuyNum: function (num, itemId) {
      console.log({ num, itemId });
      // vuexのactionをdispatchするなどの処理
    },
  },

Comments

[tokada]

ご回答ありがとうございます。
無事に設定ができました。

ありがとうございます。