如何更新或修改vuetifyjs文本字段中的任何值？

Question

我是个vuejs的新手。我正在尝试创建一些自定义数字键盘，如下所示：

​

​

这是我的HTML代码

<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"/>

方法

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
      },
  }
}

我使用input HTML实现了预期的效果。GIF图像是我实现的，但使用vuetify我不能更新或修改任何值。

下面是vuetify组件

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

定义@click="“并更新活动文本字段值。让它像虚拟键盘一样工作。如何获取或更新任何值？

下面是代码链接Demo

谢谢。

Answer 1

我认为它需要绑定到文本字段的v-model。为每个text-field分配一个数据变量。

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

然后设置active数据变量并更新...

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

Demo