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

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

非常感谢您

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

谢谢。

Answer 1

按照它说的做。不要变异道具。如果您需要更改道具的日期，请将其保存到本地组件数据中并进行修改

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

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

1 个答案: