如何在vue.js 2上更新输入类型文本中的值？

Question

我的视图刀片laravel是这样的：

<form slot="search" class="navbar-search" action="{{url('search')}}">
    <search-header-view></search-header-view>
</form>

视图刀片laravel调用vue组件（search-header-view组件）

我的vue组件（search-header-view组件）是这样的：

<template>
    <div class="form-group">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="q" autofocus v-model="keyword" :value="keyword">
            <span class="input-group-btn">
                <button class="btn btn-default" type="submit" ref="submitButton"><span class="fa fa-search"></span></button>
            </span>
            <ul v-if="!selected && keyword">
                <li v-for="state in filteredStates" @click="select(state.name)">{{ state.name }}</li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'SearchHeaderView',
        components: { DropdownCategory },
        data() {
            return {
                baseUrl: window.Laravel.baseUrl,
                keyword: null,
                selected: null,
                filteredStates: []
            }
        },
        watch: {
            keyword(value) {
                this.$store.dispatch('getProducts', { q: value })
                .then(res => {
                    this.filteredStates = res.data;        
                })
            }
        },
        methods: {
            select: function(state) {
                this.keyword = state
                this.selected = state
                this.$refs.submitButton.click();
            },
            input: function() {
                this.selected = null
            }
        }  
    }

</script>

如果我在输入文本中输入关键字“product”，它将显示自动完成：“product chelsea”，“product liverpool”，“product arsenal”

如果我点击“产品切尔西”，网址如下：http://myshop.dev/search?q=product

这个网址应该是这样的：http://myshop.dev/search?q=product+chelsea

我在输入类型文本中添加:value="keyword"来更新输入类型文本的值，但它不起作用

我怎么解决这个问题？

更新

我找到了这样的解决方案：

methods: {
    select: function(state) {
        this.keyword = state
        this.selected = state
        const self = this
        setTimeout(function () {
            self.$refs.submitButton.click()
        }, 1500)
    },
    ...
}  

有用。但这种解决方案是最佳解决方案吗？还是有另一个更好的解决方案？

Answer 1

您可以使用vue的nextTick函数代替超时。

我没有通过执行来检查你的代码，但似乎是关于时间的问题，因为当按下提交时你的值没有更新。

所以setTimeout正在帮助js购买一些时间来更新价值，但它的1500因此它的1.5秒和更长的时间是的我们无法确定每次需要花多少时间所以我们试图把最大可能的时间，仍然不是完美解决方案

你可以做这样的事情。用这个替换你的setTimeout

const self = this
Vue.nextTick(function () {
  // DOM updated
  self.$refs.submitButton.click()
})

nextTick将更新DOM并设置值，然后它将执行您的代码。

它应该工作，让我知道它是否有效。