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}`;
  },
},

みたいな。