带有 VueJS 自动完成的元素 UI：避免突变 A 道具（Vue 警告）

Question

我对 VueJS 和 Element UI https://element.eleme.io/#/en-US/component/input#autocomplete-attributes 有一个大问题 我使用自动完成组件，我希望我点击输入（onFocus 事件），我的建议重新出现

<el-autocomplete
            id="inputID"
            name="inputName"
            class="inputClass"
            v-model="inputModel"
            :fetch-suggestions="querySearchInput"
            placeholder= "Select an Input"
            ref="inputReference"
            value-key="id"
            v-loading="inputLoader"
            :value="inputValue"
            @select="onChangeInput"
            @focus="onFocusInput"
            @clear="onClearInput"
            clearable
        >
            <!-- Slot : Override Component Suggestions -->
            <template slot-scope="{item}" v-if="item.id">
                {{ item.id }} - {{ item.name }}
            </template>
        </el-autocomplete>

在我使用的 onFocus 或 onClear 上：

this.inputModel = "";
this.inputValue = ""

但它不会重置我的建议.. :/ 对我来说唯一的方法是使用：

 this.$refs.inputReference.value = "";

但这不是最佳实践我有一条消息：“vue.esm.js?efeb:591 [Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，根据道具的值使用数据或计算属性。道具正在变异：“值”“

我在组件上使用 :value 和 v-model，因为我有一个 ID，但我用 i18n 显示标签，这并不重要

非常感谢你

我认为这是因为 AutoComplete 组件包含一个 InputComponent，而我不是 VueJS 上的级联道具的专业人士..

谢谢。

Answer 1

照他说的做。不要改变道具。如果你需要从 props 中更改某些日期，请将其保存到本地组件数据并修改它

props: {
  foo: {
      type: number,
      requred: true
    }
},

...

data () {
  return {
    localFoo: this.foo
  }
}