VueJS, v-model and updating textareas: Found error. SOLVED

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.

    <div class="row">                                                                                                                 
         :placeholder="placeholder" />                                                                                                
  export default {                                                                                                                    
   props: {                                                                                                                          
      name: {                                                                                                                         
        type: String                                                                                                                  
      type: {                                                                                                                         
        type: String,                                                                                                                 
        default: 'text'                                                                                                               
      text: {                                                                                                                         
        required: true                                                                                                                
      placeholder: {                                                                                                                  
      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'                                                                                                                 

Found the error…


should be


for a <textarea> to work.

Yeah, textarea is a different animal.

//in normal HTML
<input type="text" name="aaa" value="something here">

//but for <textarea>
<textarea name="aaa">something here...</textarea>

:bulb: Ahhh, that makes it more apparent. Thanks! Edit: Your’s was a clearer example than reading MDN to find the difference.

Have been following these two rabbit holes to get more understanding