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

在我的焦点或清除我使用：

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

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

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

但这不是最好的做法，我有一个消息："vue.esm.js？efeb：591 [Vue 警告]：避免直接改变道具，因为每当父组件重新渲染时，该值都会被覆盖。相反，请使用基于道具值的数据或计算属性。道具被变异："价值">

我在组件上使用 ：value 和 v 模型，因为我库存了一个 ID，但我显示了一个带有 i18n 的标签，这并不重要

非常感谢你

我认为这是因为自动完成组件包含一个输入组件，而我不是 VueJS 上级联道具的专业人士。

谢谢。

Answer 1

就像它说的那样。不要改变道具。如果您需要从 props 更改某些日期，请将其保存到本地组件数据并进行修改

props: {
foo: {
type: number,
requred: true
}
},
...
data () {
return {
localFoo: this.foo
}
}