使用 Vuejs 和 VueX 的 AJAX 调用错误保持不变的复选框

Posted 2023-02-22

【中文标题】使用 Vuejs 和 VueX 的 AJAX 调用错误保持不变的复选框

【英文标题】：Maintain unchanged checkbox with AJAX call error with Vuejs and VUEX

【发布时间】：2020-02-02 20:32:21

【问题描述】：

我有一个组件，其中包含从 Vuex 获得的用户列表：

computed: 
   ...mapGetters(['users'])

在我的 html 模板中，我有：

<li v-for="user in users">
    <b-form-checkbox :checked="userIsActive(user)" @change="toggleActiveUser(user)"></b-form-checkbox>
</li>

在我的方法中：

userIsActive(user) 
   return user.active;
,
toggleActiveUser(user) 
   this.$store.dispatch("setState", user);
,

在调度中，我进行了一个 ajax 调用，例如：

return Vue.axios.post(url).then((response)=>
   commit("UPDATE_USER_IN_USERS", response.data.user);
).catch((err)=>
   console.log(err);
);

在提交时，我将在用户状态下更改我的用户，并且它可以工作，如果我在列表中打印“用户”的状态，如果 ajax 调用出错，它会正确更改或不更改。

但我的问题是当 ajax 调用返回错误时。

复选框更改每次，即使在 ajax 调用时出现错误，所以当我不更改我的 vuex 状态时。

我不能在 Vuex strict 中使用简单的 v-model。

那么当 ajax 调用返回错误时，我如何保持取消选中或选中复选框？

【参考方案1】：

问题是用户已经手动选中/取消选中复选框，因此当您的 ajax 调用返回错误时，您只是没有更新 vuex 状态以匹配手动选中的复选框。

当您的 ajax 返回错误时，您可以使用 javascript 找到复选框手动选中/取消选中它。这可能需要在每个复选框上设置一个唯一的 id。像这样的：

setState: function(context, user) 
  return Vue.axios.post(url).then((response)=>
     commit("UPDATE_USER_IN_USERS", response.data.user);
  ).catch((err)=>
     document.getElementById(user.id).checked = user.active;
  );

【讨论】：

有道理。谢谢！