vue.js 2の入力タイプのテキストの値を更新するにはどうすればよいですか？このような

Question

マイビューブレードlaravel：

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

ビューブレードlaravelコールVUE成分（検索ヘッダビュー成分）

マイVUE成分（検索ヘッダビュー成分）このように：

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

入力テキストにおけるI入力キーワード「製品」場合、それはオートコンプリートが表示されますが：「製品チェルシー」、「製品リバプール」、「製品の兵器庫」

私は「製品チェルシー」、このようなURLをクリックした場合：http://myshop.dev/search?q=product

万一、このようなURL：http://myshop.dev/search?q=product+chelsea

Iは入力タイプテキストのUDPATE値への入力タイプテキストに:value="keyword"を追加しましたが、それはありません動作しない

この問題を解決するにはどうすればよいですか？それは作品

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秒と少し長く、はい、我々はそれがそれぞれの時間がかかりますどのくらいの時間を識別することはできません可能な時間、まだ完全な解決策ではありません。

このようなことができます。 DOM更新され、値を設定するが、それはあなたのコードを実行できるようになるでしょう。この1

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

nextTickであなたのsetTimeoutを交換してください。

正常に動作するかどうかは問題なく動作します。