如何取消选中绑定到 vuex 存储状态数组项的复选框？

Question

我正在开发一项功能，其中用户有一个优先级列表，他们可以通过选中复选框将优先级标记为已完成（下图供参考）。

list of priorities with checkbox

在继续完成/完成优先级之前，我要求使用对话框进行确认。用户可以单击“确定”继续或单击“取消”关闭对话框而不继续操作。我已经完成了“确定”部分，但是对于“取消”，我需要复选框保持未选中状态（或者至少让它看起来没有选中）。为了处理这个问题，我将$event 对象传递给@change 事件处理程序，并在取消对话框时将目标值设置为false：evt.target.value = false;

我对这个解决方案持怀疑态度，因为我认为在视图模型中设置事件目标的值是不正确的，但我想不出别的办法。有没有其他方法来处理这种情况？

我的模板/代码是这样的（简化）：

<ul>
  <li :key="item.id" v-for="(item, index) in priorities">
    <div>
      <input
        type="checkbox"
        :checked="item.isCompleted"
        @change="handleComplete(item, $event)"
      />
      <div>
        <a href="#">{{ item.title }}</a>
        <p class="subtitle is-7">{{ item.targetDateTime | short }}</p>
      </div>
    </div>
    <button>
      <fa :icon="['fas', 'minus-circle']" />
    </button>
  </li>
</ul>

export default {
  name: "PriorityList",
  computed: {
    ...mapState({
      priorities: state => state.priorities
    }),
  },
  methods: {
    ...mapActions({
      confirmComplete: "confirmComplete"
    }),
    handleComplete(priority, evt) {
      this.$buefy.dialog.confirm({
        title: "Confirm",
        message: "This action cannot be undone from the priorities list. Do you want to continue?",
        type: "is-danger",
        size: "is-small",
        onConfirm: async () => {
            // item.isCompleted is mutated in the confirmComplete() action
            await this.confirmComplete(priority);
        },
        onCancel: () => {
            // TODO: A different solution to uncheck checkbox
            evt.target.value = false; // current solution
        }
      });
    },
  }
};

注意：我没有在复选框中使用v-model，因为它绑定到来自 vuex 存储的数组项，当复选框值更改时，这将引发错误（不要改变突变之外的状态）。

Answer 1

使用 v-model 绑定到输入

  <input
    type="checkbox"
    :value="item.isCompleted"
    @input="handleComplete(index)"
      />

用方法处理复选框状态变化

handleComplete(index) {
      this.$buefy.dialog.confirm({
        title: "Confirm",
        message: "This action cannot be undone from the priorities list. Do you want to continue?",
        type: "is-danger",
        size: "is-small",
        onConfirm: async () => {
            // I suppose this is mutating the state and that the store will get updated automatically then
            await this.confirmComplete(this.priorities[index]);
        },
        onCancel: () => {
            // TODO: use store actions to mutate state
            this.priorities[index] = false
        }
      });
    },

主要是关于模板绑定