Пользовательский интерфейс элемента с автозаполнением VueJS: избегайте мутации A Реквизит (Vue Warn) - PullRequest
Новая
       28

Пользовательский интерфейс элемента с автозаполнением VueJS: избегайте мутации A Реквизит (Vue Warn)

0 голосов
/ 23 апреля 2019

У меня большая проблема с 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 warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться всякий раз, когда родительский компонент будет перерисовываться. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита.

Я использую: value и v-модель на моем компоненте, потому что у меня есть идентификатор, но я отображаю метку с i18n, это не важно

ОЧЕНЬ ОГРОМНОЕ СПАСИБО

Я думаю, это потому, что компонент AutoComplete включает InputComponent, и я не профессионал с каскадной опорой в VueJS ..

Спасибо.

1 Ответ

1 голос
/ 23 апреля 2019

Просто делай, как написано. Не мутируйте реквизит. Если вам нужно изменить какую-либо дату из реквизита, сохраните ее в данных локального компонента и измените ее 

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

...

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