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 + '!');
});$ watchを使用して、vueインスタンスの外部にウォッチを追加する必要があります。カウンタプロパティの値の変更を示すアラートが追加されました。カウンタ値を20に設定するタイマー機能、つまりsetTimeoutも追加されています。
setTimeout(
function(){
vm.counter = 20;
},2000
);次のスクリーンショットに示すように、カウンターが変更されるたびに、watchメソッドからのアラートが発生します。
VueJSはプロパティの追加と削除を検出できません。最良の方法は、常にプロパティを宣言することです。これは、Vueインスタンスで事前に反応する必要があります。実行時にプロパティを追加する必要がある場合は、Vueグローバル、Vue.set、およびVue.deleteメソッドを利用できます。
Vue.set
このメソッドは、オブジェクトにプロパティを設定するのに役立ちます。これは、Vueがプロパティの追加を検出できないという制限を回避するために使用されます。
構文
Vue.set( target, key, value )どこ、
ターゲット：オブジェクトまたは配列にすることができます
キー：文字列または数字にすることができます
値：任意のタイプにすることができます
例を見てみましょう。
例
<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";コンソールで出力を見てみましょう。
上記のように、製品には数量が追加されます。基本的に反応性を追加するget / setメソッドは、id、name、およびpriceで使用でき、qtyでは使用できません。
vueオブジェクトを追加するだけでは反応性を実現できません。VueJSはほとんどの場合、すべてのプロパティを最初に作成することを望んでいます。ただし、後で追加する必要がある場合は、Vue.setを使用できます。このためには、vueグローバル、つまり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を使用して追加された数量のget / setを確認できます。
Vue.delete
この関数は、プロパティを動的に削除するために使用されます。
例
Vue.delete( target, 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メソッドが削除されていることもわかります。