如何在vue.js 2上更新输入类型文本中的值? [英] How can I update value in input type text on vue.js 2?

问题描述

我的视图刀片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"

如果我单击产品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 + chelsea

我在输入类型文本的udpate值中添加了输入类型文本的: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.

这篇关于如何在vue.js 2上更新输入类型文本中的值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！