Vue.jsを使い始めてハマったポイント

はじめに

Vue.jsとElementUIを初めて使用してハマったポイントを書きました。

「v-bind」は「：」に、 「v-on」は「＠」に省略できる

公式サイト：https://jp.vuejs.org/v2/guide/syntax.html#%E7%9C%81%E7%95%A5%E8%A8%98%E6%B3%95

（例）ボタンの場合

<!-- 完全な構文 -->
<el-button v-on:click="onClickSubmitButton">登録する</el-button>

<!-- 省略記法 -->
<el-button @click="onClickSubmitButton">登録する</el-button>

：（コロン）の付け忘れに注意！

（例）ボタンにdisabled属性を設定した場合

ElementUIが提供している<el-button>タグは、disabled属性を指定すると、クリック可能・不可を指定することが出来ます。
公式サイト：https://element.eleme.io/2.4/#/en-US/component/button#disabled-button

：をつけないと文字列として認識されるため、「ボタン１」と「ボタン２」は、どちらもクリックが可能となる。

：をつけると式として認識されるため「ボタン３」はクリックが可能、「ボタン４」はクリックが不可となる。

<!-- ボタン１：クリックできる -->
<el-button disabled="true">ボタン１</el-button>

<!-- ボタン２：クリックできる -->
<el-button disabled="false">ボタン２</el-button>

<!-- ボタン３：クリックできる -->
<el-button :disabled="true">ボタン３</el-button>

<!-- ボタン４：クリックできない -->
<el-button :disabled="false">ボタン４</el-button>

同じようにハマった方がいらっしゃいました
https://stackoverflow.com/questions/52517136/disable-close-on-click-modal-in-element-ui

$emitで子から親にデータが渡せない

キャメルケースではなくケバブケースで書かないといけない

$emitを使用し、子コンポーネントから親コンポーネントにイベントを渡す場合、キャメルケースではなくケバブケースで書かないとうまく動かない

NG ↓

<!-- 子コンポーネント -->
this.$emit('childEvent', item);

<!-- 親コンポーネント -->
<Child @childEvent="onChangeItem"></Child>

※onChangeItemはキャメルケースでok

OK ↓

<!-- 子コンポーネント -->
this.$emit('child-event', item);

<!-- 親コンポーネント -->
<Child @child-event="onChangeItem"></Child>

公式サイト：https://jp.vuejs.org/v2/guide/components-props.html#%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3%E3%81%AE%E5%BD%A2%E5%BC%8F-%E3%82%AD%E3%83%A3%E3%83%A1%E3%83%AB%E3%82%B1%E3%83%BC%E3%82%B9-vs-%E3%82%B1%E3%83%90%E3%83%96%E3%82%B1%E3%83%BC%E3%82%B9

受け取りたいコンポーネントで受け取る

親コンポーネントでイベントを受け取る場合、受け取りたいコンポーネントタグでイベントを受け取らないとうまく動かない

NG ↓

<!-- 子コンポーネント -->
this.$emit('child-event', item);

<!-- 親コンポーネント -->
<div @child-event="onChangeItem">
  <Child></Child>
</div>

※onChangeItemはキャメルケースでok

OK ↓

<!-- 子コンポーネント -->
this.$emit('child-event', item);

<!-- 親コンポーネント -->
<div>
  <Child @child-event="onChangeItem"></Child>
</div>

v-ifとv-forは一緒に使えない

v-ifとv-forは同じ要素に使用できないため、親要素もしくは子要素にどちらか片方を指定して使用する

NG ↓

<div
  v-for="item in itemList"
  v-if="item.displayFlag"
  :key="item.id">
   <el-button 
     @click="onClickItemButton(item)">
     {{ item.name }}
   </el-button>
</div>

OK ↓

<div
  v-for="item in itemList"
  :key="item.id">
   <el-button 
     v-if="item.displayFlag"
     @click="onClickItemButton(item)">
     {{ item.name }}
   </el-button>
</div>