What am I doing wrong here with my custom ponent?

What I want is to have:

• label
• input

Why is idfor undefined? Why do I get this error on labeltext

invalid expression: Unexpected identifier in "Name of superhero"

labeltext is supposed to be a string and I should be able to pass in any string I like?

This is what I have so far. jsfiddle

Vueponent("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>

What am I doing wrong here with my custom ponent?

What I want is to have:

• label
• input

Why is idfor undefined? Why do I get this error on labeltext

invalid expression: Unexpected identifier in "Name of superhero"

labeltext is supposed to be a string and I should be able to pass in any string I like?

This is what I have so far. jsfiddle

Vue.ponent("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>

• javascript
• vue.js
• vue-ponent

2 Answers 2

there's one problem, you just have to make sure you are including '' for literals

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

This is because v-bind:labeltext= evaluates the value as an expression. And if you need to pass an string then you need to wrap it in quotes like

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

Updated fiddle