javascript - 数据变化随机更新 - Vue/Vuex

Question

我有一个“观看项目”功能:单击图标，它会添加到我的 Vuex 存储中的数组中，图标会变为勾号，单击勾号，会将其从 Vuex 存储和图标中删除变回来。

当我在开发工具中检查 Vuex 时，它正在按预期工作。

奇怪的是，负责切换图标的数据属性仅在需要时才设置为false。它会在刷新期间工作很短一段时间，然后会无缘无故地停止，直到感觉像这样为止。

示例(对质量表示歉意):

在控制台中，您可以看到数据属性“watched”切换为 true，但只有在需要时才切换为 false。知道为什么这样做吗？

“观看”图标:

<img
  src="svg/eye-regular.svg"
  v-if="!watched"
  @click="addToWatched(item), isWatched(item), log()"
/>
<img
  src="check-solid.svg"
  v-if="watched"
  @click="removeFromWatched(item), isWatched(item), log()"
/>

('item' 是作为 prop 传递的对象)

观察数据属性:

data() {
  return {
    watched: false
  };
},

计算:

...mapGetters(["watchedItems"])

方法:

...mapActions([
  "addToWatched",
  "removeFromWatched"
]),

isWatched(item) {
  let watchFind = this.watchedItems.find(i => {
    return i.id === item.id
           ? (this.watched = true)
           : (this.watched = false);
  });
},

log() {
  console.log("data -> watched", this.watched);
}

Vuex 商店(不确定此代码是否相关，因为商店似乎工作正常):

const actions = {
    // commit items to watched
    addToWatched({ commit }, item) {
        commit("setWatchedItems", item);
    },
    removeFromWatched({ commit }, item) {
        commit("deleteWatchedItem", item);
    },
};

const mutations = {
    setWatchedItems: (state, item) => {
        let watchFind = state.watched.find(i => {
            return i.id === item.id;
        });

        if (!watchFind) {
            state.watched.push(item);
        }
    },
    deleteWatchedItem: (state, item) => {
        let watchFind = state.watched.find(i => {
            return i.id === item.id;
        });

        if (watchFind) {
            state.watched = state.watched.filter(i => {
                return i.id !== item.id;
            });
        }
    },
};

const state = {
    watched: []
};

const getters = {
    watchedItems: state => state.watched
};

更新

它的行为仍然如上所述，但是，我发现如果我在一个项目上添加“已观看”，然后立即从另一个项目上的“已观看”中删除，它就会起作用:

(你看不到我何时点击，但在 gif 的开头，我重复点击同一个图标，没有任何变化)

Answer 1

事件处理程序应该用 ; 分隔，例如:

<img
  src="svg/eye-regular.svg"
  v-if="!watched"
  @click="addToWatched(item); isWatched(item); log()"
/>
<img
  src="check-solid.svg"
  v-if="watched"
  @click="removeFromWatched(item); isWatched(item); log()"
/>