Question

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

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

如何在query道具更新时更新values数据属性？

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

Answer 1

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

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

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

1 个答案: