时间戳

首页 > 解决方案 > 带有 VueJS 自动完成的元素 UI：避免突变 A 道具（Vue 警告）

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

问题描述

我对 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 上的级联道具的专业人士。

谢谢。

标签： vue.jsautocompletepropelement-ui

解决方案

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

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

...

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

推荐阅读