从扩展了另一个组件的VueJS组件中更新一个数据属性

我正在构建一个VueJS组件，当一个prop更新时需要更新一个数据属性。从扩展了另一个组件的VueJS组件中更新一个数据属性

该组件扩展了需要query数据属性的自动完成组件。但是，它并不像我期待的那样工作。

values prop更新时，如何更新query数据属性？

<template> 
    <div> 
     <input :name="fieldName" type="hidden" v-bind:value="values.id"> 

     <input :name="'search[' + fieldName + ']'" 
       type="text" 
       v-model="query" 
       @keydown.down="down" 
       @keydown.up="up" 
       @keydown.enter.prevent 
       @keydown.enter="hit" 
       @keydown.esc="reset"/> 
    </div> 
</template> 

<script> 
    import VueTypeahead from 'vue-typeahead' 

    export default { 
     extends: VueTypeahead, 

     props: ['endpoint', 'fieldName', 'values', 'format'], 

     data() { 
      return { 
       query: '', 
       src: this.endpoint, 
       limit: 5, 
       minChars: 3, 
       queryParamName: 'q' 
      } 
     } 
    } 
</script>

来源

2017-06-15 bencarter78

这不是基本相同的问题今天早些时候问？ https://stackoverflow.com/q/44570949/38065 – Bert

@BertEvans ha！好吧，我后来意识到你回答了我的问题，但问题不是我所需要的。这是关于看道具（我不知道/想想）。也许如果我知道更多关于Vue的话，我可以/应该这样做了！ – bencarter78

这很好，我只是好奇他们为什么如此相似。 – Bert

坐落在values一位守望更新的query：

watch: { 
    values() { // called anytime this.values changes 
    this.query = this.values; 
    } 
}

来源

2017-06-15 16:01:01 thanksd

伙计，你已经保存了一天！谢谢。我一直试图在整个下午解决这个问题，并且达到了我无法看到树木的地步！ – bencarter78

从扩展了另一个组件的VueJS组件中更新一个数据属性

回答

相关问题