Question

我正在尝试对v-autocomplete组件执行以下操作：

用户在v-autocomplete组件中选择一个值
选择一个值后，立即将该值保存在lastModel属性中
我想清除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
})

选择值后立即清除v-autocomplete

1 个答案: