Hi VueJS people!
Just learning this and I’m puzzled as to how v-model is working with <textarea>
I have a component below. It’s not all of the code involved but I didn’t want to post everything. It’s three files worth I’m working with.
When this component is an <input>, v-model binds with the value without issue. It updates, if I refresh the window it can retrieve the value from localStorage and display it.
If I use the component as a <textarea>, I can see the value being updated in the devtools, and debugging BUT it doesn’t display in the component on the actual page.
<template>
<div class="row">
<component
:is="element"
class="input"
@input="update"
:class="inputClass"
v-bind="$attrs"
:name="name"
:type="type"
:value="text"
:placeholder="placeholder" />
</div>
</template>
<script>
export default {
props: {
name: {
type: String
},
type: {
type: String,
default: 'text'
},
text: {
required: true
},
placeholder: {
type:String
},
invalid: {
type: Boolean,
default: false
}
},
computed: {
inputClass () {
return {
'invalid': this.invalid
}
},
element () {
return this.type === 'textarea' ? this.type : 'input'
}
},
methods: {
update (event) {
this.$emit('update', event.currentTarget.value)
}
},
model: {
prop: 'text',
event: 'update'
},
}
</script>
Ahhh, that makes it more apparent. Thanks! Edit: Your’s was a clearer example than reading MDN to find the difference.