Сброс заполнителя по умолчанию в форме Vue JS после отправки - PullRequest
Новая
       1

Сброс заполнителя по умолчанию в форме Vue JS после отправки

1 голос
/ 11 апреля 2020

Я хочу сбросить значение имени в генераторе образцов, который я создаю, после публикации образца, но изо всех сил пытаюсь получить его правильно. Во-первых, все значения в приложении, 2 цвета и имя образца, отслеживаются и испускаются. Вот значение имени (value3), но цвета установлены одинаково, просто value1 и value2 (без сброса цветов) 

<b-form-input
        id="name"
        size="lg"
        type="text"
        class="search-bar"
        placeholder="Name Your Swatch and Enter to Save"
        v-model="value3"
        ref="value3"
        :value="value3"
        @keypress="publishSwatch"
        >
</b-form-input>

и то, что собирает имя, здесь: 

props: ['value'],

publishSwatch(e) {
  this.$emit('input', {
    value3: +this.$refs.value3.value,
  });
  if (e.key == "Enter") {
    this.createSwatch();
    this.resetForm(); //Not done yet
    this.handleSwatch();
  }
}

соответствующая рабочая часть функции createSwatch просто: 

let name = (`${this.value3}`);  //this works fine to set and output the inputted value

resetForm() {
// Stuck for what to put here
}

После публикации образца я хочу сбросить заполнитель на по умолчанию в функции resetForm(), которую я могу разместить в соответствующем месте в методе publishSwatch, которая должна быть такой же, как выше, но не может приблизиться к правильной. Цвета есть в другой функции и не сбрасываются. Я пробовал это, но, похоже, не имеет отношения к настройке входов: 

resetForm() {
    let clear = document.getElementById('name');
    clear.input.value.reset();
}

И не работает

Советы приветствуются.

Спасибо

1 Ответ

1 голос
/ 11 апреля 2020
  • Не используйте :value и v-model вместе, потому что v-model создает :value автоматически, поэтому возникнет конфликт.
  • Нет необходимости в ref потому что правильный способ - использовать привязку v-model (value3) в экземпляре вместо значения DOM

HTML

<b-form-input
    id="name"
    size="lg"
    type="text"
    class="search-bar"
    placeholder="Name Your Swatch and Enter to Save"
    v-model="value3"
    @keypress="publishSwatch">
</b-form-input>

Методы должны выглядеть следующим образом это: 

methods: {
  publishSwatch(e) {
    this.$emit('input', {
      value3: +this.value3
    });
    if (e.key == "Enter") {
      this.createSwatch();
      this.resetForm();
      this.handleSwatch();
    }
  },
  resetForm() {
    this.value3 = ''; // <-- Reset the instance value
  }
}

Вот демоверсия

...