this.$set
は、Vue.jsがリアクティブデータシステムでオブジェクトのプロパティの追加や更新を監視できるようにするために使用されます。通常、Vue.jsはオブジェクトのプロパティが追加または変更されたときに自動的にリアクティビティを更新しますが、それらのプロパティが動的に追加された場合は、自動的にリアクティブにならないことがあります。
this.$set
メソッドの構文は次のとおりです。
this.$set(target, propertyName, value);
target
:オブジェクトまたは配列propertyName
:オブジェクトのプロパティ名または配列のインデックスvalue
:プロパティまたは配列のインデックスに設定する値
上記のコードでは、this.$set
を使用して、target
オブジェクトの
プロパティを更新しています。新しい値は、propertyName
valueです
。
this.$set
を使用することで、target.propertyName
が変更されたときに、Vue.jsがそれを検出し、関連する依存関係が自動的に更新されるようになります。
おまけ:リアクティブとは
Vue.jsのリアクティブシステムとは、データが変更されると、自動的に関連する画面の部分が更新される仕組みのことです。
例えば、あるウェブアプリケーションで、ユーザーがフォームに情報を入力すると、その情報がリストに追加されるような場面を考えてみましょう。Vue.jsを使っている場合、フォームのデータが変更された瞬間に、自動的にリストが更新されます。これにより、画面をリフレッシュすることなく、最新の情報が表示されます。