Home » vue » How to update or modify any value in vuetifyjs text-field?

How to update or modify any value in vuetifyjs text-field?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’m a newbie with vuejs.
I’m trying to create some custom number keyboard like:

enter image description here

Here is my HTML code

<input type="text" @click="keyboard($event)" v-model="box.height"/>
<input type="text" @click="keyboard($event)" v-model="box.width"/>
<input type="text" @click="keyboard($event)" v-model="box.length"/>
<input type="text" @click="keyboard($event)" v-model="box.weight"/>

Methods

export default {
   data: () => ({
      active: null,
      box: {
          height: '2.0'
          width: '3.0',
          length: '2.5',
          weight: '0.5'
      }
   }),
   methods: {
      keyboardValue(keyboardValue) {
          var latestValue = ''
          if(this.active !== null){
            latestValue = this.active.target.value += keyboardValue
            this.active.target.value = latestValue;
            this.active.target.focus()
          }
      },
      keyboard($event){
        this.active = $event
      },
  }
}

I achieved as expected with input HTML. GIF image is what I achieved but with vuetify I can’t update or modify any value.

Here are the vuetify component

<v-text-field label="Height" @click="keyboard($event)" v-model="box.height"></v-text-field>
<v-text-field label="Width" @click="keyboard($event)" v-model="box.width"></v-text-field>
<v-text-field label="Length" @click="keyboard($event)" v-model="box.length"></v-text-field>
<v-text-field label="Weight" @click="keyboard($event)" v-model="box.weight"></v-text-field>

Define @click="" and update active text field value. Make it work as a virtual keyboard. How can I get or update any value?

Here is the codepen link
Demo

Thanks.

Answers:

I think it needs to be tied to the v-model of the text-fields. Assign each text-field a data var.

<v-text-field label="Height" @click="keyboard('h')" v-model="h"></v-text-field>
<v-text-field label="Width" @click="keyboard('w')" v-model="w"></v-text-field>
<v-text-field label="Length" @click="keyboard('l')" v-model="l"></v-text-field>

Then set the active data var and update…

methods: {
      keyboardValue(keyboardValue) {
          if (this.active !== null) {
            this[this.active] = (this[this.active]||'') + keyboardValue
          }
      },
      keyboard(model){
        this.active = model
      },
}

Demo