Vue编译模板时出错-使用v-attr时意外冒号
Vue编译模板时出错-使用v-attr时意外冒号
提问于 2018-12-17 04:38:18
我有一个Vue组件：
// Define a new component called tile
Vue.component('truchet-tile', {
data: function() {
return {ttype: 0};
},
computed: {
// a computed getter
image: function() {
let filename;
switch (ttype) {
case 0:
filename = "horizontal";
break;
[... snip ...]
default:
return "";
}
return 'http://mazes.doontoon.com/' + filename + '.svg';
}
},
template: '<img v-attr="src:image" />'
});我得到了这个错误：
我尝试过在src中使用v-bind或{{ }}，但不推荐这样做：https://012.vuejs.org/api/directives.html#v-attr
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-12-17 04:52:14
您可以使用v-bind:src="image"，或者直接使用:src="image"快捷方式而不使用v-attr，
<!-- verbose -->
<img v-bind:src="url" />
<!-- shorthand -->
<img :src="url" />下面是你的代码：
// Define a new component called tile
Vue.component('truchet-tile', {
data: function() {
return {ttype: 0};
},
computed: {
// a computed getter
image: function() {
let filename;
switch (ttype) {
case 0:
filename = "horizontal";
break;
[... snip ...]
default:
return "";
}
return 'http://mazes.doontoon.com/' + filename + '.svg';
}
},
template: '<img :src="image" />'
});此外，您还添加了v0.12链接，并在您的小提琴示例中使用vuejs v2.5，所以请查看来自Vuejs的最新更新以及它现在的工作方式，check this
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53806264
复制相关文章
相似问题
腾讯云开发者
