Vue.js応答インターフェース

Vueは、データ動的応答インターフェイスを追加できます。

例えば、次の例では、$watchプロパティを使用してデータを監視します。正しい応答を得るには、$watchをVueインスタンスに追加する必要があります。

この例では、ボタンをクリックするとカウンターが1を増えます。setTimeoutは、10秒後にカウンターの値に20を増えます。

<div id = "app">
    <p style = "font-size:25px;">カウンター: {{ counter }}</p>
    <button @click = "counter++" style = "font-size:25px;">ここにクリックしてください</button>
</div>
<script type = "text/javascript">
var vm = new Vue({
    el: '#app',
    data: {
        counter: 1
    }
});
vm.$watch('counter', function(nval, oval) {
    alert('カウンター値の変化:' + oval + 'は' + nval + 'になります!');
});
setTimeout(
    function(){
        vm.counter += 20;
    },10000
);
</script>

Vueでは、作成済みのインスタンスに新しいルートレベルのレスポンシブプロパティを動的に追加することはできません。

Vueは、オブジェクトプロパティの追加または削除を検出できません。一番いい方法は、インスタンスがnull値であっても、インスタンスを初期化する前にルートレベルのリアクティブプロパティを宣言します。

実行中にプロパティを追加または削除する必要がある場合は、グローバルなVue、Vue.set、およびVue.deleteメソッドを使用できます。

Vue.set

Vue.setメソッドは、オブジェクトのプロパティを設定するために使用されます。これより、Vueがプロパティを検出および追加できないという制限を解決できます。構文は次のとおりです。

Vue.set( target, key, value )

引数の説明:

  • target: オブジェクトまたは配列
  • key : 文字列または数字
  • value: 任意の型

<div id = "app">
   <p style = "font-size:25px;">カウンター: {{ products.id }}</p>
   <button @click = "products.id++" style = "font-size:25px;">ここにクリックしてください</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
vm.products.qty = "1";
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('カウンター値の変化:' + oval + 'は' + nval + 'になります!');
});
</script>

上記の例では、変数myproductは、最初に次のコードを使用して作成されました。

var myproduct = {"id":1, name:"book", "price":"20.00"};

変数はVueインスタンスのdataオブジェクトに割り当てられます。

var vm = new Vue({ el: '#app', data: { products: myproduct } });

myproduct配列に1つ以上の属性を追加する場合は、Vueインスタンスを作成した後、次のコードを使用します。

vm.products.qty = "1";

コンソール出力を表示します。

上記の図のように、数量属性qtyがproductsに追加されていますが、get/setメソッドは、id、name、およびprice属性にのみ使用でき、qty属性では使用できません。

Vueオブジェクトを追加しても応答は得られません。 Vueは、主に最初にすべてのプロパティを作成します。 この機能を実現したい場合は、Vue.setで実行します。

<div id = "app">
<p style = "font-size:25px;">カウンター: {{ products.id }}</p>
<button @click = "products.id++" style = "font-size:25px;">ここにクリックしてください</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
Vue.set(myproduct, 'qty', 1);
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('カウンター値の変化:' + oval + 'は' + nval + 'になります!');
});
</script>

コンソールの出力結果から見ると、get/setメソッドをqty属性に使用できます。

Vue.delete

Vue.deleteは、動的に追加された属性を削除するために使用されます。構文:

Vue.delete( target, key )

引数の説明:

  • target: オブジェクトまたは配列
  • ey : 文字列または数字

<div id = "app">
   <p style = "font-size:25px;">カウンター: {{ products.id }}</p>
   <button @click = "products.id++" style = "font-size:25px;">ここにクリックしてください</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      products: myproduct
   }
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('products.id', function(nval, oval) {
   alert('カウンター値の変化:' + oval + 'は' + nval + 'になります!');
});
</script>

上記の例では、Vue.deleteを使用してprice属性を削除します。 コンソールの出力は次のとおりです。

上記の出力結果から見ると、price属性が削除され、id属性とname属性のみが残り、price属性のget/setメソッドも削除されます。

Share

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です