2

Tenho um array que nomeei como "nomes", que inicialmente está vazio

nomes: []

Estou incluindo elementos nesse array com a função unshift(), para incluir elementos sempre no início do array e não no final dele, então faço isso da seguinte forma:

nomes.unshift("Leonardo")
nomes.unshift("Victor")
nomes.unshift("Guilherme")

Utilizarei o v-for para exibir os elementos do array na minha página como uma lista:

<ul>
   <li v-for="nome in nomes">
     {{ nome }}
   </li>
</ul>

A saída será:

  • Guilherme
  • Victor
  • Leonardo

Agora quero lista-los com um índice, então faço o seguinte:

<ul>
   <li v-for="(nome, i) in nomes">
     {{ i }}: {{ nome }}
   </li>
</ul>

E a saída será

  • 1: Guilherme
  • 2: Victor
  • 3: Leonardo

Mas eu quero que os índices sejam invertidos, ou seja, que eu tenha o seguinte resultado:

  • 3: Guilherme
  • 2: Victor
  • 1: Leonardo

Como faço para inverter a ordem dos índices do v-for ?

4
  • 1
    Não sei se funciona com vuejs mas não seria algo como a expressão {{ nomes.length - i }}: {{ nome }} 10/09/2022 às 19:39
  • Não deu muito certo, @AugustoVasques 12/09/2022 às 1:21
  • Pra quem votou negativo se puder comentar o que posso melhorar na questão, ajuda muito. 12/09/2022 às 1:22
  • 1
    Obrigado por aceitar a resposta. Em breve irei trazer algumas postagens sobre OL e sobre o counter-increment: para o SOpt. 13/09/2022 às 18:24

2 Respostas 2

4

Note que se a ideia é só exibição, você não precisa fazer nada no JavaScript, as listas em HTML já suportam indicadores que podem ser customizados, no caso usando a tag <OL> com o atributo reversed, exemplo:

<ol reversed>
  <li>Foo</li>
  <li>Bar</li>
  <li>Baz</li>
</ol>

Não precisa nem usar Array.prototype.unshift(), basta o próprio Array.prototype.push() no array, assim evita você até se atrapalhar (suponho, mas pode ser que você realmente deseje alterar TODOS os índices usando unshift()), exemplo:

const HelloVueApp = {
  data() {
    return {
      items: []
    }
  },
  mounted() {
    setInterval(() => {
        this.items.push(Math.random());
    }, 500);
  },
}

Vue.createApp(HelloVueApp).mount('#exemplo')
<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="exemplo">
  <ol reversed>
    <li v-for="item of items">
    {{item}}
    </li>
  </ol>
</div>

Notem que é possível customizar o OL para trocar os números por outros tipos, como respondi em: https://stackoverflow.com/a/28075034/1518921 e você também pode usar um pseudo-element ::before (ou até o ::after, dependendo do efeito que desejar) com a propriedade counter-increment: ... para estilizar o que será exibido no lugar dos indicadores nativos.

0

Encontrei a solução aplicando o seguinte:

<ul>
   <li v-for="(nome, i) in nomes">
      {{ nomes.length - i }}: {{ nome }}
   </li>
</ul>

Com nomes.length recebo o tamanho do array e subtraio o valor do índice, obtendo o índice na ordem inversa, obtendo o resultado:

  • 3: Guilherme
  • 2: Victor
  • 1: Leonardo

Referência

3
  • 1
    Olá Victor. Concordo que funciona, mas não atende necessariamente ao enunciado da sua pergunta: Mas eu quero que os índices sejam invertidos. Visualmente são apresentados os valores com um calculo simples de subtração, mas os índices não foram invertidos de fato. Entendo perfeitamente que o AR lhe forneceu algo que resolva visualmente no SOen, mas é justamente porque ele não se preocupou com o significado técnico do termo "índice" (index) e talvez você também não, soa como um problema XY. 13/09/2022 às 14:49
  • 1
    Mas não foi exatamente o que o colega Augusto recomendou? 13/09/2022 às 14:55
  • Sim @CypherPotato, foi exatamente o que o Augusto Vasques comentou, mas no momento mesmo que de fato não inverta o índice, visualmente já resolve meu problema, me contentei que não há como inverter de fato a ordem do índice, após a resposta do Augusto. 13/09/2022 às 17:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .