首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Vue编译模板时出错-使用v-attr时意外冒号

Vue编译模板时出错-使用v-attr时意外冒号
EN

Stack Overflow用户
提问于 2018-12-17 04:38:18
回答 1查看 907关注 0票数 2

我有一个Vue组件:

代码语言:javascript
复制
// 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

JSFiddle is here

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-12-17 04:52:14

您可以使用v-bind:src="image",或者直接使用:src="image"快捷方式而不使用v-attr

代码语言:javascript
复制
<!-- verbose -->
<img v-bind:src="url" />

<!-- shorthand -->
<img :src="url" />

下面是你的代码:

代码语言:javascript
复制
// 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

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53806264

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档