

処置の流れがわからないです。  
<http://gihyo.jp/dev/serial/01/vuejs/0002?page=2> を参考にしながらvue.jsを勉強しています。  
htmlに

[code]

    <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>
    
[/code]

とあり、

[code]

    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;
    
[/code]

とあります。わからないことは、

①computed が呼び出されるときはいつか  
②

[code]

    updateName: function(event) {
        this.name = event.target.value;
    }
    
[/code]

のthis.nameのthisは何故いるのか？ event.target.value はどこのことを指しているのか  
です。

②に関してはさっぱりわからないのですが、①の方ではcomputedが呼び出されるときは、`v-bind:style="{'border': (isValid
? '' : '1px solid red')}"`のisValidが呼び出されたときでしょうか？


CC BY-SA 3.0
2018-03-10T03:12:15.113
42285
2018-03-12T06:50:36.997
2018-03-12T06:50:36.997
19110
27689
question
html vue.js
computed 中の関数が呼び出されるのはいつ？


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

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

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

例えば①に関しては [算出プロパティとウォッチャ —
Vue.js](https://jp.vuejs.org/v2/guide/computed.html) にほとんど答えが書いてあります。


CC BY-SA 3.0
2018-03-11T03:33:06.287
42315
2018-03-11T03:33:06.287
4388
42285
answer