[Vue.js] リストの書き換えでハマった件

ハマったこと

リストの中身を書き換えたのにリアクティブされない !
Why !

コード

html

{{ postIds[1] }}<br>
<input type="text" name="post_ids[1]" v-model="postIds[1]">
<input type="button" @click="clear(1)" value="クリア">

JavaScript

<script>
var app = new Vue({
  el: '#app',
  data: {
    postIds: [1,2,3,4],
  },
  methods: {
    clear: function(index) {
      this.postIds[index] = 0;
    }
  }
});
</script>

大雑把に書くと、こんな感じの実装でした。

クリアボタンをクリックして this.postIds[index] をゼロで上書きしても、表示が変わらない、、、という状態です。

答え

リストの要素を上書きするときは splice を使う。

上記を、次のように修正することで期待する動作になりましたとさ。

clear: function(index) {
  this.postIds.splice(index, 1, 0);
}

JavaScript には リスト と オブジェクト があって、それを意識しないとダメだったようです。

悔しいミスでした。


スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク




コメントの入力は終了しました。