Question

我的视图刀片如下：

<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>

如果我输入关键字＆＃34; product＆＃34;在输入文本中，它将显示自动完成：＆＃34;产品chelsea＆＃34;，＆＃34;产品利物浦＆＃34;，＆＃34;产品库？＆＃34;

如果我点击＆＃34;产品chelsea＆＃34;，网址如下：http://myshop.dev/search?q=product

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

我已将输入类型文本中的:value="keyword"添加到输入类型文本的udpate值，但它不起作用

我该如何解决这个问题？

更新

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

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更新并设置值，然后它会执行您的代码。

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

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

1 个答案: