1

処置の流れがわからないです。
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が呼び出されたときでしょうか?

1 件の回答 1

2

computedではなくisValid関数が呼び出されるのはいつか?という意味だと思います。
呼び出されるのはざっくりいうとVueオブジェクトの初期化が完了した時とnameの値が変更された時です。

thisが必要なのはVue.jsがthis === vmとなるようにupdateNameを呼び出すからです。
event.target.valueはinput要素に入力された値です。

Vue.jsの勉強をするなら古い情報でなく公式ドキュメントを読んだ方が効率も正確性もよいと思います。

例えば①に関しては 算出プロパティとウォッチャ — Vue.js にほとんど答えが書いてあります。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。