Vue.js 2.6.0以降で利用できる動的引数について。
公式ドキュメントのチュートリアルを進めていたらエラーが出ました。
https://vuejs.org/v2/guide/syntax.html#Dynamic-Arguments
vue.js:634 [Vue warn]: Property or method "attributename" >is not defined on the instance but referenced during >render. Make sure that this property is reactive, either >in the data option, or for class-based components, by >initializing the property
vue.js:634 [Vue warn]: Invalid value for dynamic >directive argument (expected string or null): undefined
ソース
<div id="app">
<a v-bind:[attributeName]="url">hoge</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'http://hoge.com',
attributeName: 'href'
},
})
</script>
原因はv-bind
に渡している変数名attributeName
。
DOM内テンプレート(直接HTML書いたテンプレート)では、ブラウザが属性名を
小文字として認識するので、attributename
がない!ってなってるみたいです。
なのでDOM内テンプレートを使う場合、変数名を全部小文字attributename
にすればOKです。
webpackを利用している場合は事前にコンパイルされるので問題ないようです。(※試してません)
<div id="app">
<a v-bind:[attributename]="url">hoge</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'http://hoge.com',
attributename: 'href'
},
})
</script>
ドキュメントをしっかり読むと、ちゃんと記載されてます。
https://vuejs.org/v2/guide/syntax.html#Dynamic-Arguments
in-DOM テンプレート (すなわち、HTML ファイルに直接書かれるテンプレート) を使う場合、ブラウザが強制的に属>性名を小文字にするため、キー名を大文字にするのは避けるべきです:
つまり、DOM内テンプレート使うときはちゃんとブラウザの属性名として有効な文字にしなさいよ。ってことですかね。