vue.js

Vue.jsでimgのsrcにマスタッシュ記法で画像URLを設定すると404エラーが発生するのでv-attrを使う

More than 1 year has passed since last update.

この記事はVue.js 0.12.10の情報です。最新のバージョンとは内容が違うため、ご注意下さい。

<img src="">にマスタッシュ記法{{}}で画像URLを設定すると、HTML DOMを表示する初回に404エラーが発生する。対処として公式ドキュメントにあるとおり、v-attrを使えば良い。
http://jp.vuejs.org/api/directives.html#v-attr

v-attrに設定するとき、マスタッシュ記法は使えないので、複数のプロパティを組み合わすことが出来ない(?)ため、複数のプロパティを扱いたい場合はmathodsに関数を定義してを使うと良さそう。

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js - テスト</title>
</head>
<body>
    <script language="javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.10/vue.min.js"></script>
    <div id="app">
        <!-- 404エラーが発生する例 -->
        <img  v-repeat="image" src="{{src}}_{{src}}.png"></img>

        <!-- 発生しない例 -->
        <img  v-repeat="image" v-attr="src:myTest(src)"></img>

        <!-- プロパティそのものを使って、組み合わせを行わない場合は関数を呼ばずとも良い -->
        <img  v-repeat="image" v-attr="src:src"></img>
    </div>

    <script language="javascript">
    var app = new Vue({
        el: '#app',
        data: {
          image: [{src:"test1"},{src:"test2"}]
      },
      methods:{
        myTest : function(src) {
            return src + "_" + src + ".png";
        }
    }
})
    </script>
</body>
</html>