从扩展另一个组件的 VueJS 组件中的更改的 prop 更新数据属性答案

【问题标题】：Updating a data attribute from a changed prop in a VueJS component that extends another component从扩展另一个组件的 VueJS 组件中的更改的 prop 更新数据属性
【发布时间】：2017-11-18 05:11:44
【问题描述】：

我正在构建一个 VueJS 组件，它需要在 prop 更新时更新数据属性。

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

values 属性更新时如何更新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>

【问题讨论】：

这不是今天早些时候问的基本相同的问题吗？ stackoverflow.com/q/44570949/38065
@BertEvans 哈哈！好吧，后来我意识到你回答了我的问题，但这个问题并不是我所需要的。这是关于观看道具（我不知道/考虑过）。也许如果我对 Vue 有更多了解，我可以/应该解决这个问题！
一切都很好，我只是好奇为什么它们如此相似。

标签： javascript vue.js vuejs2

【解决方案1】：

在values 上设置观察者并在其中更新query：

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

【讨论】：

老兄，你拯救了这一天！谢谢你。我整个下午都在努力解决这个问题，结果到了只见树木不见森林的地步！