v-forを使って表示させたtable内にあるinputを監視したい

Question

v-forを使ってitemsの中身をtableに表示させ、table内にあるinputに入力された値が初期値と比べて更新されていた場合に更新ボタンが押せる様にしたいと考えています。

itemsの中身が少ない時は

this.preprice != this.items[0].price | this.preprice != this.items[1].price

の様にひとつひとつ比較をしていくことができますが、数が増えた場合にはこのやり方では良くないと考えています。

何番目のinputが更新されたかを監視できればと思うのですが、やり方がわからずにいます。
どなたか良い方法がお分かりになる方がいらっしゃいましたら、ご教授いただけると幸いです。

コードの全文は以下の通りです。

<template>
  <div class="container">
    <table class="table table-border">
      <thead>
        <tr>
          <th>名前</th>
          <th>値段</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td>{{ item.name }}</td>
          <td>
            <input type="text" class="form-control form-control-sm" v-model="item.price">
          </td>
        </tr>
      </tbody>
    </table>
    <button class="btn btn-primary" :disabled = !updatePrive>更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [{
        name: "肉",
        price: 0
      },
      {
        name: "野菜",
        price: 0
      }],
      // 初期値
      preprice: 0
    }
  },
  computed: {
    updatePrive() {
      if (this.preprice != this.items[0].price | this.preprice != this.items[1].price) {
        return true
      }
      return false
    }
  }
}
</script>

Answer 1

ご質問拝見いたしました。

初期値が固定されているのであれば、some関数を利用するのはいかがでしょうか。

  computed: {
    updatePrive: function() {
      // 変更がある場合：true 変更がない場合：false
      return this.items.some(item => item.price !== this.preprice);
    }
  }

ちなみにボタンのdisabled属性は以下かなと思いました。

- <button class="btn btn-primary" :disabled = !updatePrive>更新</button>
+ <button class="btn btn-primary" :disabled="!updatePrive">更新</button>

ご参考になれば幸いです。

Comments

[yotubarail]

ありがとうございます。
無事変更したかどうか監視できる様になりました。

今後inputごとに初期値を変更したくなった場合に考え方の参考になるものなどありましたら、教えていただけますか。

[Twoshi]

ご確認いただきありがとうございます！
想定通りの動きとなり幸いです。

> 今後inputごとに初期値を変更したくなった場合に考え方
こちらについてですが、some関数は第二引数にindexを取得することもできます。
そのため、例えば変更前と変更後の配列をそれぞれ持っておき変更前と変更後で変更があったかどうかを比較することもできると思います。
例えば this.items.some((item, index) => item.price !== this.beforeItems[index].price);のような方法が考えられます。※this.beforeItems(変更前の配列)

今後どのようなソースにしていくかにもよってsome関数じゃない方法の方が良い場合もありますので、一概には言えませんが、、、
今後のご参考になればと思いますm(_ _)m

Answer 2

・v-forの中にコンポーネントを入れて、それぞれで別々のcomputed関数を持たせる
・v-for全体に対するcomputed関数で処理する。（現状のやつ）
・関数を返すようなcomputed関数を定義してしまう*
（*https://qiita.com/kambe0331/items/36210147a5aaab3f0d73）