Оставьте неизменным флажок с ошибкой вызова AJAX с Vuejs и VUEX

Question

У меня есть один компонент со списком пользователей, который я получаю от 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);
});

при коммите. Я изменю своего пользователя в пользовательском состоянии, и это работает, если я печатаю состояние "user" всписок, он изменяется правильно или не изменяется, если есть ошибка при вызове ajax.

Но моя проблема в том, когда ошибка возврата вызова ajax.

Флажок меняет каждыйвремя, даже если есть ошибка при вызове ajax, и поэтому, когда я не изменяю свое состояние vuex.

Я не могу использовать простую v-модель со строгим Vuex.

Так какЯ могу установить флажок снят или установлен, когда ошибка возврата вызова ajax?

Answer 1

Проблема в том, что пользователь уже вручную установил / снял флажок, поэтому, когда ваш вызов ajax возвращается с ошибкой, вы просто не обновляете свое состояние vuex, чтобы оно соответствовало флажку, установленному вручную.

Когдаваш ajax возвращается с ошибкой, вы можете использовать javascript, чтобы найти флажок, вручную установить или снять его. Это, вероятно, потребует установки уникального идентификатора для каждого флажка. Как то так:

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;
  });
}