javascript - vuejs方法中的无限循环

Question

我正在尝试选择一个组件并取消选择，为此我具有以下功能，但看起来该方法正在输入 if 和 if-else，我尝试了 if 和 if-else 的各种组合，但它仍然是相同的。我应该使用 vuex 来设置数据吗？

 getRowClass({ id, Status }) {
  let rowClass = "list-row";

  if (this.selectedId === id) {
    if (this.selectedId != this.alreadyClicked) {
      rowClass += " list-row--selected";
      this.alreadyClicked = id;
      alert("alreadyClicked "+this.alreadyClicked)
    } else if (this.alreadyClicked!=0) {
      rowClass += " list-row";
      this.alreadyClicked = 0;
      alert("alreadyCli "+this.alreadyClicked)

    }
  }

  if (Status == "Ready") {
    rowClass += " list-row--online";
  } else {
    rowClass += " list-row--offline";
  }

  return rowClass;
},

标签： javascriptvue.jsvuejs2

Answer 1

我通过将 unSelectedId 变量添加到 Vuex 到中央状态管理来解决它

methods: {
  ...mapActions("stations", [
    "selectAux",
    "unSelectAux",
  ]),
  togglePageMode(id) {
    this.unSelectAux(id); // add unset id to vuex via this function 

  }
}


compute:{
getRowClass({...}){
   if (this.unSelectedId === id && this.selectedId == 0) {
            rowClass += " list-row";
          } else if (this.selectedId != 0 && this.selectedId === id) {
            rowClass += " list-row--selected";
          }
}
}