Vue.js this.$set の使い方と役割を徹底解説

Vueにおいて、リアクティブなオブジェクトに新しいプロパティを追加する必要がある場合、直接代入演算子（例：this.someProperty = someValue）を使用すると、Vueがそのプロパティの変更を検出できず、プロパティがリアクティブでなくなる可能性があります。この問題を解決するために、this.$setメソッドを使用して新しいプロパティを追加し、リアクティブにすることができます。

この.$setメソッドの使い方は以下の通りです：

this.$set(obj, propertyName, value)

1. obj: 属性を追加するオブジェクト
2. propertyName： 追加するプロパティ名
3. 価値：追加するプロパティの値

例えば、Vueコンポーネントに新しいプロパティnewPropertyをdataオブジェクトに追加する必要がある場合、this.$setメソッドを使用することができます。

this.$set(this.$data, 'newProperty', someValue)

このようにすることで、newProperty属性がリアクティブで、Vueによってリスニングや更新ができるようになります。