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

Question

我有一个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" />'
});

我收到此错误：

我尝试使用v-bind或{{ }}代替src，但是不建议这样做：https://012.vuejs.org/api/directives.html#v-attr

JSFiddle is here

Answer 1

您可以使用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