VueJS-リアクティブインターフェイス

VueJSは、動的に追加されるプロパティに反応性を追加するオプションを提供します。すでにvueインスタンスを作成しており、watchプロパティを追加する必要があることを考慮してください。それは次のように行うことができます-

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ counter }}</p>
         <button @click = "counter++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1
            }
         });
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
         setTimeout(
            function(){
               vm.counter = 20;
            },2000
         );
      </script>
   </body>
</html>

データオブジェクトに1として定義されたプロパティカウンターがあります。ボタンをクリックすると、カウンターが増加します。

Vueインスタンスは既に作成されています。それに時計を追加するには、次のようにする必要があります-

vm.$watch('counter', function(nval, oval) {
   alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

vueインスタンスの外部に監視を追加するには、$ watchを使用する必要があります。カウンタープロパティの値の変更を示すアラートが追加されています。タイマー機能も追加されています。 setTimeout。カウンタ値を20に設定します。

setTimeout(
   function(){
      vm.counter = 20;
   },2000
);

カウンターが変更されるたびに、次のスクリーンショットに示すように、監視メソッドからのアラートが発生します。

カウンター

VueJSはプロパティの追加と削除を検出できません。最良の方法は、常にプロパティを宣言することです。これは、Vueインスタンスで事前にリアクティブにする必要があります。実行時にプロパティを追加する必要がある場合、Vueのglobal、Vue.set、およびVue.deleteメソッドを使用できます。

Vue.set

このメソッドは、オブジェクトにプロパティを設定するのに役立ちます。 Vueがプロパティの追加を検出できないという制限を回避するために使用されます。

構文

Vue.set( target, key, value )

どこで、

ターゲット：オブジェクトまたは配列にすることができます

key：文字列または数値にすることができます

値：任意のタイプを使用できます

例を見てみましょう。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         vm.products.qty = "1";
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

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

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

次のようにVueインスタンスのデータオブジェクトに与えられます-

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

Vueインスタンスが作成された後、myproduct配列にもう1つのプロパティを追加することを検討してください。それは次のように行うことができます-

vm.products.qty = "1";

コンソールで出力を見てみましょう。

MyProduct Array

上記のように、製品では数量が追加されます。基本的に反応性を追加するget/setメソッドは、id、name、priceで使用できますが、qtyでは使用できません。

vueオブジェクトを追加するだけでは反応性を達成できません。 VueJSは、ほとんどすべてのプロパティを最初に作成することを望んでいます。ただし、後で追加する必要がある場合は、Vue.setを使用できます。そのためには、vue globalを使用して設定する必要があります。 Vue.set。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.set(myproduct, 'qty', 1);
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

Vue.setを使用して、次のコードを使用してqtyを配列に追加しました。

Vue.set(myproduct, 'qty', 1);

vueオブジェクトをコンソール化しました。出力は次のとおりです。

製品

これで、Vue.setを使用して追加されたqtyのget/setを確認できます。

Vue.delete

この関数は、プロパティを動的に削除するために使用されます。

例

Vue.delete( target, key )

どこで、

ターゲット：オブジェクトまたは配列にすることができます

key：文字列または数値を指定できます

プロパティを削除するには、次のコードのようにVue.deleteを使用できます。

例

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "app">
         <p style = "font-size:25px;">Counter: {{ products.id }}</p>
         <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
      </div>
      <script type = "text/javascript">
         var myproduct = {"id":1, name:"book", "price":"20.00"};
         var vm = new Vue({
            el: '#app',
            data: {
               counter: 1,
               products: myproduct
            }
         });
         Vue.delete(myproduct, 'price');
         console.log(vm);
         vm.$watch('counter', function(nval, oval) {
            alert('Counter is incremented :' + oval + ' to ' + nval + '!');
         });
      </script>
   </body>
</html>

上記の例では、Vue.deleteを使用して、次のコードを使用して配列から価格を削除しました。

Vue.delete(myproduct, 'price');

出力は次のとおりです。コンソールに表示されます。

削除

削除後、価格が削除されるため、IDと名前のみが表示されます。 get/setメソッドが削除されていることもわかります。

Vuejs-reactive-interface

目次

VueJS-リアクティブインターフェイス

例

Vue.set

構文

例

例

Vue.delete

例

例