javascript - 删除数组元素失败

Question

我正在创建一个页面来过滤一些建议，用户可以在其中投票选出他最感兴趣的建议。

我将此屏幕分为 3 个选项卡 [最高评价]、[最新] 和 [我的投票] 启动屏幕时，我在数据库中进行调用以提供所有建议，我使用 axios 来执行此操作。

axios
      .get("/sugestoes/carregar/xxxx")
      .then(res => {
        this.sugestoesGeral = res.data.sugestoes

        for(var i=0; i < this.sugestoesGeral.length; i++){
          if(this.sugestoesGeral[i].meu_voto === "S"){
            this.meusVotos.splice(1, 0, this.sugestoesGeral[i])
          }
        }

        this.maisVotados     = [...this.sugestoesGeral]
        this.maisNovos       = [...this.sugestoesGeral] 
        this.ordernarArrVotos(this.maisVotados)
      })
      .catch(err => {
        console.log(err);
      });

这样我就可以从数据库中的第一次调用开始三个不同的数组

当用户对建议进行投票时，我根据各自的选项卡[最高评价]、[最新]和[我的投票]对数组重新排序

this.moreVoted和this.moreNew数组重新排序没有任何问题。但是我需要对数组 this.meusVotes 执行其他操作除了简单地重新排序之外，我还需要检查它是否删除了投票，如果我这样做了，我需要从数组中删除这个位置，然后再次向用户显示它

要从数组中删除一个位置，我正在执行以下操作:

for(var i=0; i < this.sugestoesGeral.length; i++){
        if(this.sugestoesGeral[i].meu_voto === 'N'){
          var length = this.meusVotos.length
          for(var x=0; x < length; x++){
            if(this.meusVotos[x].id_sugestao === this.sugestoesGeral[i].id_sugestao){
              this.meusVotos.splice(x, 1)
            }
          }
        }
      }

console.log(this.meusVotos)

但是这种方式没有任何效果，并且不会从我的数组中删除任何位置。只是为了测试我做了如下:

this.meusVotos.shift()
console.log(this.meusVotos)

但结果是一样的，没有从数组中删除任何元素。最奇怪的是，我复制了这些数组来在 browser console 上进行测试。并且它的工作没有错误。以下示例在 console 上运行良好:

数组:

sugestoesGeral = [
                    {
                        status_atual: "Em votação",
                        categoria: "Parâmetros",
                        quantidade_votos: 1,
                        meu_voto: "S",
                        id_sugestao: 16,
                        titulo: "Alerta de Valor Excedente por Cliente no MDF-e",
                        data_criacao: "29/01/2020",
                        descricao_resumida: "Alerta de Valor Excedente por Cliente no MDF-e",
                        motivo_rejeicao: "",
                        data_rejeicao: "",
                        data_implementacao: "",
                        data_previsao_execucao: "",
                        data_encerramento_votacao: "",
                        cor: "#b8dbff"
                    },
                    {
                        status_atual: "Em votação",
                        categoria: "Despesas",
                        quantidade_votos: 1,
                        meu_voto: "N",
                        id_sugestao: 7,
                        titulo: "Nova coluna Controle de Despesas",
                        data_criacao: "28/01/2020",
                        descricao_resumida: "Checar vínculo financeiro da Despesa quando vinculada a uma Nota com Financeiro lançado",
                        motivo_rejeicao: "",
                        data_rejeicao: "",
                        data_implementacao: "",
                        data_previsao_execucao: "",
                        data_encerramento_votacao: "",
                        cor: "#b8dbff"
                    }
                ]

meusVotos = [
                    {
                        status_atual: "Em votação",
                        categoria: "Parâmetros",
                        quantidade_votos: 1,
                        meu_voto: "S",
                        id_sugestao: 16,
                        titulo: "Alerta de Valor Excedente por Cliente no MDF-e",
                        data_criacao: "29/01/2020",
                        descricao_resumida: "Alerta de Valor Excedente por Cliente no MDF-e",
                        motivo_rejeicao: "",
                        data_rejeicao: "",
                        data_implementacao: "",
                        data_previsao_execucao: "",
                        data_encerramento_votacao: "",
                        cor: "#b8dbff"
                    },
                    {
                        status_atual: "Em votação",
                        categoria: "Despesas",
                        quantidade_votos: 1,
                        meu_voto: "N",
                        id_sugestao: 7,
                        titulo: "Nova coluna Controle de Despesas",
                        data_criacao: "28/01/2020",
                        descricao_resumida: "Checar vínculo financeiro da Despesa quando vinculada a uma Nota com Financeiro lançado",
                        motivo_rejeicao: "",
                        data_rejeicao: "",
                        data_implementacao: "",
                        data_previsao_execucao: "",
                        data_encerramento_votacao: "",
                        cor: "#b8dbff"
                    }
                ]

for循环删除元素:

for(var i=0; i < this.sugestoesGeral.length; i++){
        if(this.sugestoesGeral[i].meu_voto === 'N'){
          var length = this.meusVotos.length
          for(var x=0; x < length; x++){
            if(this.meusVotos[x].id_sugestao === this.sugestoesGeral[i].id_sugestao){
              this.meusVotos.splice(x, 1)
            }
          }
        }
      }

欢迎任何帮助

Answer 1

我建议您创建一个 computed property对于以下每种情况:this.moreVoted、this.moreNew 和 this.meusVotes。

这样你的sugestoesGeral就变成了SSOT这些属性。

computed: {
  maisVotados() {
    return this.sugestoesGeral.sort((a, b) => {
      if (a.quantidade_votos > b.quantidate_votos) return 1;
      else if (a.quantidate_votos < b.quantidade_votos) return -1;
      return 0;
    })
  },
  maisNovos() {
    return this.sugestoesGeral.sort((a, b) => {
      let dateParts = a.data_criacao.split("/");
      const dateA = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
      dateParts = b.data_criacao.split("/");
      const dateB = new Date(dateParts[2], dateParts[1] - 1, dateParts[0]);
      if (dateA > dateB) return 1;
      else if (dateA < dateB) return -1;
      return 0;
    });
  }
},
methods: {
  reordenarSugestoes() {
    this.meusVotos = this.sugestoesGeral.filter((sugestao) => sugestao.meu_voto === 'S');
  }
}