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

Question

我的自定义组件在这里做错了什么？

我想要的是：

• 标签
• 输入

为什么是idfor未定义的？为什么我收到这个错误labeltext

无效表达式：“超级英雄的名字”中出现意外标识符

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

这是我到目前为止。提琴手

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'"/>

Answer 2

这是因为v-bind:labeltext=将值计算为表达式。如果您需要传递一个字符串，那么您需要将它用引号括起来，例如

v-bind:labeltext="'Name of superhero'"

更新的小提琴