vue component の 配列データを更新したのに値がviewに反映されない。

LTするまでもないが、簡単なのにVue ですげーハマった話。

問題

• vue component の Array data に対して、代入更新を行ったのに、template に反映されない。

解決

直接代入を行っても、vue側のレンダリングトリガーを引くことができないため、規定のレンダリングトリガーに対応したmethod を call する必要がある。

push, splice, shift… など。

これが起きた時には、 this.$nexttik は有効に働かないので、上記のトリガーを引かせる。
直接代入はやめようぜって話だった。

参考になったlink

• https://aqua-engineer.com/vue-js-reactve/
• https://jp.vuejs.org/2016/02/06/common-gotchas/