javascript - 自定义组件，错误编译模板

Question

我的自定义组件哪里做错了？

我想要的是:

• 标签
• 输入

为什么 idfor 未定义？为什么我在 labeltext

上收到此错误

invalid expression: Unexpected identifier in "Name of superhero"

labeltext 应该是一个字符串，我应该可以传入任何我喜欢的字符串？

这就是我目前所拥有的。 jsfiddle

Vue.component("base-input", {
  props: {
    value: {
      type: String,
      required: true
    },
    idfor: {
      type: String,
      required: true
    },
    labeltext: {
      type: String,
      required: true
    }
  },
  template: 
  `
  <div>
    <label for="idfor">{{labeltext}}</label>
    <input type="text" id="idfor" v-bind:value="value" v-on:input="$emit('input', $event.target.value)">
  </div>
  `
});

Vue.config.devtools = true;

new Vue({
  el: "#app",
  data() {
    return {
      user: {
        name: "Hulk",
        age: 42
      }
    };
  }
});

HTML

<div id="app">
    <base-input v-bind:idfor="name" v-bind:value="user.name" v-bind:labeltext="Name of superhero"/>
</div>

Answer 1

有一个问题，您只需确保为 literals 添加了 ''

<div id="app">
<base-input v-bind:idfor="'name'" v-bind:value="user.name" v-bind:labeltext="'Name of superhero'"/>