vuetify.js - 选择值后立即清除 v-autocomplete

Question

我正在尝试使用 v-autocomplete 执行以下操作成分:

用户在 v-autocomplete 中选择一个值组件

一旦选择了一个值，我就会将该值保存在 lastModel 中。属性(property)

我要清除v-autocomplete值以允许用户继续输入另一个值。

问题是:我无法在选择一个值后立即清除 v-autocomplete 组件。

这是我写的基本标记来说明我想要的:

<v-autocomplete
   v-model="model"
   :items="states"
   label="Where do you live"
   @change="modelChanged"
   ref="autocompleteComponent"
/>

和JS:

new Vue({
    data () {
        return {
            model: null,
            lastModel: null,
            states: [
                'Alabama', 'Alaska'
            ]
        }
    },
    methods: {
        modelChanged () {
            // We don't want lastModel to update if model is null
            if (this.model) {
                this.lastModel = this.model
            }
            this.model = null
        }
    }
})

所以这是行不通的。但是，如果我等待一秒钟以重置模型，它会起作用:

new Vue({
    data () {
        return {
            model: null,
            lastModel: null,
            states: [
                'Alabama', 'Alaska'
            ]
        }
    },
    methods: {
        modelChanged () {
            if (this.model) {
                this.lastModel = this.model
            }
            setTimeout(() => {
                this.model = null
            }, 1000)
        }
    }
})

然而， 等一下不是我喜欢的解决方案 ，我很想知道如何写得更好，以使其更“本地化”

这是一个可以尝试的代码笔: https://codepen.io/anon/pen/qyKdaZ?editors=1011

Answer 1

替换 setTimeout与 this.$nextTick

this.$nextTick(() => {
    this.model = null
})