Can you help me troubleshoot my custom component?
I'm trying to create a setup with:
- label
- input
Why am I seeing the error message "idfor is undefined"? And what's causing the issue with labeltext?
An unexpected identifier was found in the expression "Name of superhero"
Shouldn't labeltext be a string that can accept any value?
This is the current state of my code snippet. Check it out on: 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>