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

JavaScript
1

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

Found the error…

:value="text"

should be

:value.prop="text"

for a <textarea> to work.

3

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

: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