输入值未设置与V-模型

Question

我试图通过使用V模型设置与Vue公司的输入值。我正在使用Vue Typeahead库。我遇到的问题是，当我点击我要选择我火的Onhit方法的项目，在这个方法我更改查询的值更新的输入值。里面的Onhit（）方法，这并不工作，但如果我在（）方法创建改变它将会改变。

我可以确认的是，当我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-typeahead库在onhit触发后调用reset函数，将查询重置为null。

您可以通过添加

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

要你的方法（它覆盖默认的）解决这个问题。您也可以为v模型分配一个不同的变量。