Vue.js 勘違い集

Vue.js 勘違い集:

自分がVue.jsを触っていて勘違いしていたことをここに綴ります。

一通りドキュメントを読んだ程度の初心者の理解の確認の助けになればと思います。

もう少し溜まってからが良かったと思ったんですが、下書きが圧迫しているので公開します。

なぜか動かない

• メインのVueオブジェクトのel属性で指定されている要素よりも親の要素を操作しようとしていた

selectタグ配下のoption要素を動的に作れない

<!-- 動かない --> 
<select> 
  <div v-for="option in options"> 
    <option :value="option.v">{{option.text}}</option> 
  </div> 
</select> 

• optionに直接v-forを記述する。
  
  
  • select要素配下にはoption要素しか置けないことが原因。
  • 
    v-forはただの構文で要素を操作しているわけではないという勘違いによるもの。
  • https://jp.vuejs.org/v2/guide/forms.html

$emitしたイベントが受け取れない

Vue.component("human", { 
  props: ["name"], 
  template: `<button @click="console.log('emit a'); $emit('a')">{{name}}</button>`, 
}); 
 
var app = new Vue({ 
  el: "#app", 
  data: function(){ 
    return { 
      names: ["a", "b", "c"], 
    } 
  }, 
}); 

<!-- 動かない --> 
<div id="app"> 
  <div v-on:a="console.log('listen')"> 
    <human v-for="n in names" :name="n"></human>   
  </div> 
</div> 

• 
  v-on:aはイベントaを送出するタグのあるテンプレートを持つコンポーネントでしか使えない。
  
  
  • 情報を親コンポーネントに伝える目的ではあるのだが、自分のコンポーネントではなく親のコンポーネントにv-onを書いてしまう勘違いによるもの。

コンポーネントのテンプレートがなぜか途中までしか表示されない

Vue.component("human", { 
  props: ["name"], 
  template: `<div>あ</div><div>{{name}}</div>`, 
}); 
 
var app = new Vue({ 
  el: "#app", 
  data: function(){ 
    return { 
      names: ["a", "b", "c"], 
    } 
  }, 
}); 

• 
  <div>{{name}}</div>の部分しか表示されない
  
  
  • ルート要素は一つに限るという規定があるよう。
  • 
    <div><div>あ</div><div>{{name}}</div></div>とすることで解決