v-modelで入力値が設定されていません

Question

v-modelを使用してVueで入力値を設定しようとしています。私はVue Typeaheadライブラリを使用しています。私が抱えている問題は、Onhitメソッドを起動するアイテムをクリックすると、このメソッドでは入力値を更新するためにクエリの値を変更するということです。 Onhit（）メソッドの中では、これは機能しませんが、created（）メソッドで変更すると変更されます。

私がconsole.log（）this.queryを実行すると、新しい値が取得されていることを確認できます。それは動的に更新されていないだけです。

<template> 
    <div> 
     <div class="input-group"> 
      <input type="text" 
       class="form-control" 
       autocomplete="off" 
       v-model="query" 
       @keydown.down="down" 
       @keydown.up="up" 
       @keydown.enter="hit" 
       @keydown.esc="reset" 
       @blur="reset" 
       @input="update" 
       v-bind:placeholder="selectedLocation"/> 

      <span class="input-group-addon"> 
       <i class="fa fa-spinner fa-spin" v-if="loading"></i> 
       <template v-else> 
        <i class="fa fa-search" v-show="isEmpty"></i> 
        <i class="fa fa-times" v-show="isDirty" @click="reset"></i> 
       </template> 
      </span> 
     </div> 

     <!-- the list --> 
     <ul v-show="hasItems"> 
      <li v-for="(item, $item) in items" :class="activeClass($item)" @mousedown="hit" @mousemove="setActive($item)"> 
       <span v-html="item.city"></span> 
       <div class="meta-location-data"><span v-html="item.region"></span><span>, </span><span v-html="item.country"></span></div> 
      </li> 
     </ul> 
    </div> 
</template> 


<script> 
import VueTypeahead from 'vue-typeahead'; 

export default { 
extends: VueTypeahead, 

props: ['selectedLocation'], 

create() { 
    // This works 
    this.query = 'test'; 
} 

data() { 
    return { 
     // The source url 
     // (required) 
     src: '/api/test/', 

     // The data that would be sent by request 
     // (optional) 
     data: {}, 

     // Limit the number of items which is shown at the list 
     // (optional) 
     limit: 5, 

     // The minimum character length needed before triggering 
     // (optional) 
     minChars: 3, 

     // Highlight the first item in the list 
     // (optional) 
     selectFirst: false, 

     // Override the default value (`q`) of query parameter name 
     // Use a falsy value for RESTful query 
     // (optional) 
     queryParamName: false 
    } 
}, 

methods: { 
    // The Item that the user clicks on (required) 
    onHit (item) { 
     // This does not work :(
     this.query = item.city; 
     this.$emit('location-was-changed', item); 
    }, 

    // The callback function which is triggered when the response data are received (optional) 

    prepareResponseData (data) { 
     let testData = [{ 
       city: 'Zamin Sukhteh', 
       region: 'Khuzestan', 
       country: 'Iran' 
      }, 
      { 
       city: 'Azreh-ye ‘Abbasabad', 
       region: 'Khuzestan', 
       country: 'Iran' 
      }, 
      { 
       city: 'Avondale', 
       region: 'Auckland', 
       country: 'New Zealand' 
      }, 
      { 
       city: 'Elsio', 
       region: '', 
       country: 'Fiji' 
     }]; 

     return testData 
      .filter((location) => { 
       // Just get the data we want 
       return location.country.includes(this.query) 
       || location.city.includes(this.query) 
       || location.region.includes(this.query) 
      }); 
    } 
} 
} 
</script> 

<style scoped src="./typeahead.scss"></style> 

Answer 1

は、問題を発見VUE-先行入力ライブラリが戻ってnullにクエリをリセットonhit火災後にリセット機能を呼び出します。

あなたは（それがデフォルトを上書き）あなたの方法に

reset: function reset() { 
    this.items = []; 
    this.loading = false; 
} 

を追加することによってこの問題を解決することができます。また、v-modelに別の変数を割り当てることもできます。