computed 中の関数が呼び出されるのはいつ?
処置の流れがわからないです。
http://gihyo.jp/dev/serial/01/vuejs/0002?page=2 を参考にしながらvue.jsを勉強しています。
htmlに
<div id="example" v-bind:style="{'border': (isValid ? '' : '1px solid red')}">
<p>名前 {{ name }}</p>
<p>
<input type="text" v-on:input="updateName($event)">
</p>
<p v-show="!isValid">
名前を入力してください
</p>
<p v-show="isValid">
<button v-on:click="sendData">送信</button>
</p>
</div>
とあり、
var vm = new Vue({
el: '#example',
data: {
name: '',
},
computed: {
isValid: function () {
return this.name.length > 0;
}
},
methods: {
updateName: function(event) {
this.name = event.target.value;
},
sendData: function() {
alert(this.name);
}
}
});
window.vm = vm;
とあります。わからないことは、
①computed が呼び出されるときはいつか
②
updateName: function(event) {
this.name = event.target.value;
}
のthis.nameのthisは何故いるのか? event.target.value はどこのことを指しているのか
です。
②に関してはさっぱりわからないのですが、①の方ではcomputedが呼び出されるときは、v-bind:style="{'border': (isValid ? '' : '1px solid red')}"
のisValidが呼び出されたときでしょうか?