如何关注v-text-field并将值更改为空

Question

我想将onFocus上的v文本字段的值设置为空。

我尝试过onFocus属性，但是什么也没有发生。我想清除焦点上的值，而不要使用vuetify的clearable按钮。

<v-text-field type="number" value="0"></v-text-field>

关于此操作的任何建议？ ：-）

Answer 1

您可以使用@focus事件来触发方法。这是带有输入的示例。我使用了v-model

有关Vue.js v-model的更多信息。

events

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    value: 'test'
  },
  methods: {
    onFocus() {
      this.value = '';
    }
  }
})

Answer 2

您可以尝试

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="value" @focus="onFocus" />
</div>

如果您查看vuetify文档

<v-text-field type="number" value="0" @focus="someMethod()"></v-text-field>

您将在右侧页边空白处看到一个选项卡事件，以及插槽和属性