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

您应该添加将清除商店内部状态的突变。示例：

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

然后像这样从您的组件中调用此突变：

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

我不确定你是不是想那样……

Answer 2

我们可以使用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()
    },

如何使用VueJS和Vuex重置表单元素

2 个答案: