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

Question

My view blade laravel like this :

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

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

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"

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

Should the url like this : http://myshop.dev/search?q=product+chelsea

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?

Update

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?

Answer 1

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.

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

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 will let DOM updated and set values then it will execute your code.

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