CODEWITHSUNDEEP
javascriptvue.jsvue-component
Dejan.S
Dejan.S

Reputation: 19118

Custom component , error compiling template

What am I doing wrong here with my custom component?

What I want is to have:

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.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>

Upvotes: 7

Views: 7039

Answers (2)

void
void

Reputation: 36703

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

Upvotes: 7

manish
manish

Reputation: 1458

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

Upvotes: 8

Related Questions