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

2022-01-25 00:00:00 vue.js laravel-5.3 vue-component vuejs2 vuex

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

My view blade laravel like this :

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

视图刀片 laravel 调用 vue 组件(search-header-view 组件)

The view blade laravel call vue component (search-header-view component)

我的 vue 组件(search-header-view 组件)是这样的:

My vue component(search-header-view component) like this : 

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

如果我在输入文本中输入关键字产品"，它将显示自动完成:产品切尔西"、产品利物浦"、产品阿森纳"

If I input keyword "product" in input text, it will show autocomplete : "product chelsea", "product liverpool", "product arsenal"

如果我点击product chelsea"，网址如下:http://myshop.dev/搜索?q=产品

If I click "product chelsea", the url like this : http://myshop.dev/search?q=product

网址应该是这样的:http://myshop.dev/search?q=product+切尔西

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

I had add :value="keyword" in input type text to udpate value of input type text, but it does not work

我该如何解决这个问题?

How can I solve this problem?

更新

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

I had find the solution like this :

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

它有效.但是这个解决方案是最好的解决方案吗?还是有其他更好的解决方案?

It works. But is this solution the best solution? or there is another better solution?

推荐答案

你可以使用vue的nextTick函数代替超时.

Instead of timeout you can use vue's nextTick function.

我没有通过执行来检查你的代码，但似乎它的时间问题是在按下提交时你的值没有更新.

I didn't checked your code by executing but seems its problem regarding timings as when submit is pressed your value isn't updated.

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

so setTimeout is helping js to buy some time to update value, but its 1500 so its 1.5 second and its little longer and yes we can not identify how much time it will take each time so we tempted to put max possible time, still its not perfect solution

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

you can do something like this. replace your setTimeout with this one

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

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

nextTick will let DOM updated and set values then it will execute your code.

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

It should work, let me know if it works or not.

相关文章