vue.js 0.12 から vue.js 2.x 系にアップデートした時に v-repeat と v-on 周りがおかしくなる時の対処と、v-bind の利用

はじめに

今回、vue.js 0.12 を 2.x 系までバージョンアップする過程で以下の変更点に気づきました。

• 0.12 では v-repeat という構文があったが、vue.js 2.x 系では削除され、 v-for というものになっていた
• v-bind というものが増えていた
• v-on の書き方が変わっていた

これらの変更点について、修正方法をメモしておきます。

動かなくなった例

以下のような vue.js v0.12 のスクリプトが動かなくなりました。

わかりやすさのためJSとHTMLをまとめて書きます

<script>
vm = new Vue({
  el: #menu,
  data: {
    items: [
      {text: 'ほげ'},
      {text: 'ふが'},
    ]
  }
  methods: {
    doSomething() {
      // なにかの処理
    }
});
</script>

<div id="menu">
  <div v-repeat="items">
    <image src="{{ url }}" v-on="click : doSomething">
    {{ text }}
  </div>
</div>

このjsをひとつひとつ修正していくことで、2.xでも動くようにしていきます。

v-repeat は vue.js 2.x で v-for となる

2.xでは v-repeat は使えなくなり、変わりに v-for を使うようになります。HTML側だけの変更で済みます。

before

<div id="menu">
  <div v-repeat="items">
    <image src="{{ url }}" v-on="click : doSomething">
    {{ text }}
  </div>
</div>

after

<div id="menu">
  <div v-for="item in items">
    <image src="{{ item.url }}" v-on="click : doSomething">
    {{ item.text }}
  </div>
</div>

でもこれだけだと動かない

でも実はこれだけではまだ動きません。あと変更箇所が2つあります。

v-bind を使うようにする

<image src="{{ item.url }}"> このような書き方はできなくなりました。 <image v-bind:src="item.url"> このように書く必要があります。

before

<div id="menu">
  <div v-for="item in items">
    <image src="{{ item.url }}" v-on="click : doSomething">
    {{ item.text }}
  </div>
</div>

after

<div id="menu">
  <div v-for="item in items">
    <image v-bind:src="item.url" v-on="click : doSomething">
    {{ item.text }}
  </div>
</div>

さらに v-bind は以下の様に省略できる

<div id="menu">
  <div v-for="item in items">
    <image :src="item.url" v-on="click : doSomething">
    {{ item.text }}
  </div>
</div>

でもまだ動かない

もう一つ、v-on も修正する必要があります。

v-on の書き方変更

before

<div id="menu">
  <div v-for="item in items">
    <image :src="item.url" v-on="click : doSomething">
    {{ item.text }}
  </div>
</div>

after

<div id="menu">
  <div v-for="item in items">
    <image :src="item.url" v-on:click="doSomething">
    {{ item.text }}
  </div>
</div>

これで動くようになる

これで完全に動くようになります。vue.js 2.x になって痒い所に手がとどくようになり、以前よりぐっと使いやすくなりました。これをみてあなたも v2.0 を使ってみましょう。