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

Question

我的看法bladelaravel是这样的：

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

视图bladelaravel调用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"

如果我点击 "product chelsea"，url 就像这样：http://myshop.dev/search?q=product

url 应该是这样的：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 函数代替超时。

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

so setTimeout 正在帮助 js 购买一些时间来更新值，但是它是 1500 所以它是 1.5 秒而且它稍微长一点，是的我们无法确定它会花费多少时间每次都花时间，所以我们试图尽可能多地投入时间，但仍然不是完美的解决方案

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

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

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

应该可以，请告诉我是否有效。

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

How can I update value in input type text on vue.js 2?

vue.js

vue-component

vuex

laravel-5.3

vuejs2