Блог

У меня есть компонент «Вопрос и ответ», написанный на VueJS, с хранилищем Vuex. Каждый ответ представляет собой <textarea> элемент, такой как следующий:

 <textarea class="form-control" rows="1" data-answer="1" :value="answer(1)" @change="storeChange"></textarea>
  

Как вы можете видеть, значение элемента управления устанавливается путем вызова answer() метода и передачи номера вопроса в качестве параметра.

При изменении ответа вызывается storeChange метод, и изменения кэшируются во временном объекте ( this.changes ) в соответствии со следующим кодом:

 props : [
    'questionnaire'
],
methods : {
    answer(number) {
        if (this.questionnaire.question_responses amp;amp;
            (number in this.questionnaire.question_responses)) {
            return this.questionnaire.question_responses[number];
        }
        return null;
    },
    storeChange(e) {
        Vue.set(this.changes, e.target.dataset.answer, e.target.value);
    },
    save() {
        // removed for clarity
    },
    reset() {
        // what to do here?
    },
}
  

Если пользователь нажимает кнопку Сохранить, я отправляю действие для обновления хранилища.

Если пользователь хочет сбросить форму в исходное состояние, мне нужно очистить this.changes , что не проблема, но мне также нужно «обновить» значения из хранилища. Как мне это сделать?

Обратите внимание, что источник начального состояния questionnaire поступает через prop, а не вычисляемое свойство, которое напрямую отображается в хранилище. Причина этого в том, что на одной странице может быть несколько компонентов «Вопрос-ответ», и я обнаружил, что таким образом проще передавать состояние.

мы можем, используя refs форму сброса, пример

текстовое поле формы

 <form ref="textareaform">
  <textarea
    class="form-control"
    rows="1"
    data-answer="1"
    :value="answer(1)"
    @change="storeChange"
  >
  </textarea>
  <button @click="reset">reset</button>
</form>
  

Сброс

 reset() {
    // ref='textareaform'
    // reset() method resets the values of all elements in a form
    // document.getElementById("form").reset(); 
    this.$refs.textareaform.reset()
},