Как сбросить элементы формы с помощью VueJS и Vuex

Question

У меня есть компонент «Вопросы и ответы», написанный на 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 &&
            (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, поступает через реквизит, а не вычисляемое свойство, которое отображается непосредственно в хранилище. Причина этого в том, что на одной странице может быть несколько компонентов «Вопрос и ответ», и мне было проще передать состояние таким образом.

Answer 1

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

форма textarea

<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()
    },

Answer 2

Вы должны добавить мутацию, которая очистит ваше состояние внутри магазина.Пример:

mutations: {
 resetState(state) {
  state.yourDataName = state.yourDataName.map(currItem => {
   currItem = '';
   return currItem;
  });
 }
}

А затем вызвать эту мутацию из вашего компонента так:

methods: {
 update (e, type) {
  this.$store.commit('resetState');
 }
}

Я не уверен, что вы имели в виду что-то подобное.