如何更新或修改 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
      },
  }
}

我通过输入 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="" 并更新活动文本字段值。让它作为一个虚拟键盘工作。如何获取或更新任何值？

这里是codepen链接 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