vue.js 2의 입력 유형 텍스트 값을 업데이트하려면 어떻게 해야 합니까?

vue.js 2의 입력 유형 텍스트 값을 업데이트하려면 어떻게 해야 합니까?

내 뷰 블레이드 라벨은 다음과 같습니다.

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

View 블레이드 laravel call vue 구성 요소(검색 헤더 뷰 구성 요소)

내 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 riverpool", "product arsole"이 자동 완성됩니다.

product chelsea를 클릭하면 http://myshop.dev/search?q=product와 같은 URL이 나타납니다.

http://myshop.dev/search?q=product+sublic과 같은 URL이 필요합니다.

추가했습니다.:value="keyword"입력유형텍스트의값을업데이트하기위해입력유형텍스트를입력하지만작동하지않습니다.

어떻게 하면 이 문제를 해결할 수 있을까요?

갱신하다

저는 다음과 같은 해결책을 찾았습니다.

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

그건 효과가 있다.하지만 이 솔루션이 최선의 해결책일까요?아니면 더 나은 해결책이 있을까요?

시간 초과 대신 vue의 nextTick 함수를 사용할 수 있습니다.

실행으로 코드를 확인하지 않았는데 제출을 눌렀을 때 값이 업데이트되지 않아 타이밍에 문제가 있는 것 같습니다.

set Timeout은 js가 값을 갱신하는 데 시간을 벌 수 있도록 돕고 있지만 1500초이므로 1.5초, 조금 더 오래 걸립니다.그래서 매번 시간이 얼마나 걸리는지 알 수 없기 때문에 가능한 한 많은 시간을 할애하려고 했습니다만, 아직 완벽한 솔루션은 아닙니다.

이런 것도 할 수 있어요.set Timeout을 이 타임아웃으로 바꿉니다.

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

nextTick은 DOM을 업데이트하고 값을 설정한 후 코드를 실행합니다.

될 거야, 되는 건지 안 되는 건지 알려줘.

언급URL : https://stackoverflow.com/questions/47879651/how-can-i-update-value-in-input-type-text-on-vue-js-2