Vue.jsでハマったところ（主にIE）

Vue.jsを使用していて、つまづいたポイントをまとめました。

<table>タグの中では<template>タグが使えない（IE）

コンパイルエラーになるため、v-ifなどは各要素に記述する必要がある。
（v-forで2行ずつ書き出す場合とかはどうすればいいんだろう？別途componentを作成？）

HTML

<!-- ダメな例 -->
<table>
    <thead>...</thead>
    <template v-if="foo">
        <tbody>...</tbody>
        <tfoot>...</tfoot>
    </template>
</table>

<!-- 修正後 -->
<table>
    <thead>...</thead>
    <tbody v-if="foo">...</tbody>
    <tfoot v-if="foo">...</tfoot>
</table>

ディレクティブ属性値の中を改行してはいけない（IE）

条件式が長くなった場合など、途中で改行してしまうとコンパイルエラーになる。
（classなど、通常のhtml属性値は改行しても大丈夫）
複雑な条件は算出プロパティやウォッチャなどを使った方が見た目もすっきりするのでベター。

<!-- ダメな例 -->
<div
    v-if="(foo.property_one || foo.property_two) &&
        (bar.property_one || bar.property_two)"
>

<!-- 修正後（改行削除） -->
<div
    v-if="(foo.property_one || foo.property_two) && (bar.property_one || bar.property_two)"
>

<!-- さらに修正（算出プロパティに変更） -->
<div v-if="isValid">
<!-- もしくは -->
<div v-if="isFooValid && isBarValid">

createdやmountedの時点では、インスタンスは変数に代入されていない

createdやmountedメソッド内ではthisを使うので問題ないが、
「インスタンスを変数名で指定している別の関数」を実行すると意図しない動きになる。
（変数の値がundefinedになるため、そのプロパティやメソッドを呼ぶとTypeErrorになる。）

ES2015

const vm = new Vue({
  el: 'foo',
  created() {
    console.log(typeof this); // object
    logEl();
  },
});

function logEl() {
  console.log(typeof vm); // undefined
  console.log(typeof vm.$el); // TypeError: Cannot read property '$el' of undefined
}

F.Y.I. 下記コードで、ログの順番は「created → mounted → end」となる。
（ページに.fooがなければmountedは実行されないが、createdは実行される）

ES2015

const vm = new Vue({
  el: '.foo',
  created() {
    console.log('created', vm); // vmはundefined
  },
  mounted() {
    console.log('mounted', vm); // vmはundefined
  },
});

console.log('end', vm); // vmはobject