Question

无法删除数组元素

2020-02-05

112

javascript vue.js vuejs2

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

我将此屏幕分为 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)

但结果是一样的，没有从数组中删除任何元素。最奇怪的是，我复制了这些数组以在 浏览器控制台 上进行测试，并且它可以正常工作。以下示例在 控制台 上运行良好：

数组：

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

我建议您为以下每种情况创建一个计算属性： 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');
  }
}

Answer 2

尝试

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

看看效果如何。

正如我之前所解释的， .splice() 是从数组中删除元素的正确方法。我建议您检查 x 的值是否为数字，并且不超过数组长度。，您可能需要将 x < length 更改为 x < this.meusVotos.length ，据我了解， length 是固定的，并且您修改了数组而没有获得新的长度值。 this.meusVotos.length 是一个实时检查的变量，长度是静态的，如果您修改数组，它保持不变，从而使 x 在某些时候超出范围。