Vue.js始めるおれおれアドベントカレンダー2016 – 3日目

なんだかこんな感じのことを言われてしまいまして。

[Vue warn]: id="item-name-{{item.id}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

読んで字のごとくなんですが、属性で title="{{foo}}" みたいな書き方は（昔は大丈夫だったけど）今は駄目で、代わりに :title="foo" みたいにしてね、とのことでした。（ちなみに昔の文法を知ってたんじゃなくてAngularJSと混同して間違えました。）

警告が出る版

<label for="item-name-{{item.id}}">Name</label>
<input id="item-name-{{item.id}}" v-model="item.name" class="form-control" type="text" />

警告は出るけど動く。つまり本当に form の値が文字通りの item-name-{{item.id}} になる。

警告が出ない版（修正版）

<label :for="`item-name-${item.id}`">Name</label>
<input :id="`item-name-${item.id}`" v-model="item.name" class="form-control" type="text" />

これで想定通りの動作。ラベルクリックで入力欄にフォーカス。

あ、でもテンプレート文字列を使ってるので、IE以外の環境でご覧ください。あー今回はただの例だからってんで簡単に書いちゃったけど、実務ではどうするんだろな。JSはBabeれば良いんだろうけど、HTMLだしなあ。IE 11を無視するわけにもいかんだろうし。

警告が出ない昔の版（おまけ）

コードは警告出る版と同じだけど、読み込むVueのバージョンだけv1.0.28にしたもの。

（直近この件については <input> を <label> の中に持てれば for とか指定する必要もなくなってそもそも問題が起きないんだけど、 Bootstrap なんか使うとほら、分けて書けって感じだったから。）

その他

なんか言われたり言われなかったりもしたんだけど、縮小版 vue.min.js の方だと無言で、開発者版 vue.js の方で言われました。おおなるほど。

item-name-${item.id} みたいなのって

どう扱ったら良いんだろう？　そのまま書く今回ので動いてるけど、関数化して例えば :for="getControlId('name')" みたいにした方が良いんだろうか。

methods: {
  getControlId: function(name) {
    return `item-${name}-${this.id}`;
  },
},

みたいな。