2

Ba tarde senhores, sou iniciante com vue e estou criando uma lista, mas estou com dificuldade para entender como irei ordenar lista clicando na coluna titulo segue exemplo:

new Vue({
  el: "#lista",
  data:{
    users :[
      {nome: "Marcos Santos", email: "[email protected]"},
      {nome: "Lennon Bueno", email: "[email protected]"}
    ]
  }
})
<!DOCTYPE html>
	<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<title>Vue 1</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://unpkg.com/vue"></script>
	</head>
	<body>
		<div class="container">
			<div id="lista">
				<table class="table table-bordered">
					<tr>
						<th><a href="#">Nome</a></th>
						<th><a href="#">Email</a></th>
					</tr>
					<tr v-for="item in users">
						<td>{{item.nome}}</td>
						<td>{{item.email}}</td>
					</tr>
				</table>
			</div> <!-- #lista -->
		</div> <!-- .container -->
		<script>
			
		</script>
	</body>
</html>

Gostaria quando clicasse em nome ordenasse por nome, e por email ordenasse pelo email, por onde eu começo?

2
  • 1
    É só ordenar a array de dados. Sua dúvida é sobre como ordenar, ou sobre como rodar uma função (como a de ordenação) a partir de um clique?
    – bfavaretto
    Commented 12/06/2017 às 19:49
  • @bfavaretto como rodar a ordenação a apartir do cllick Commented 12/06/2017 às 20:01

2 Respostas 2

6

Você começa pela método sort que as arrays têm em JavaScript. Esse método retorna uma função onde você define como comparar um par de valores a e b. Ela deve retornar um valor menor que zero se a for menor que b, zero se forem iguais, ou um valor maior que zero se a for maior que b. E para comparar strings o método localeCompare convenientemente retorna um valor compatível com o sort.

Para amarrar um evento no Vue, basta usar os atributos @evento="..." (ou v-on:evento="...") no elemento-alvo, e registrar o método a ser executado na lista de métodos do app ou componente.

No seu caso, pode fazer assim:

new Vue({
  el: "#lista",
  data:{
    users :[
      {nome: "Marcos Santos", email: "[email protected]"},
      {nome: "Lennon Bueno", email: "[email protected]"}
    ]
  },
  methods: {
    sortUsers: function(chave) {
      this.users.sort(function(a, b) {
        return a[chave].localeCompare(b[chave])
      });
    }
  }
});
<script src="https://unpkg.com/vue"></script>

<div id="lista">
  <table class="table table-bordered">
    <tr>
      <th><a href="#" @click="sortUsers('nome')">Nome</a></th>
      <th><a href="#" @click="sortUsers('email')">Email</a></th>
    </tr>
    <tr v-for="item in users">
      <td>{{item.nome}}</td>
      <td>{{item.email}}</td>
    </tr>
  </table>
</div> <!-- #lista -->

4

Conforme recomendação da documentação do Vue, utilize uma propriedade computed e a biblioteca Lodash. Link da documentação.

No exemplo, coloquei de acordo com a documentação, deixei comentado o código e também inseri um recurso adicional, o de inverter a ordem das colunas, exemplo de A-Z e Z-A.

new Vue({
    el: "#lista",
    data: {
        // Coluna padrão para ordernar
        colunaSort: 'nome',

        // Opção de ascendente ou descendente, padrão inicia como asc
        colunaOrder: 'asc',

       // Itens para ordenar
        users: [
            {nome: "Marcos Santos", email: "[email protected]"},
            {nome: "Zeus Bueno", email: "[email protected]"}
        ]
    },
    methods: {

        // Metodo que define qual a coluna que será ordernada
        // Também define se é  ascendente ou descendente 
        sort: function(coluna) {

            // Se é a mesma coluna que está setando, então vai inverter a orderm de exibição
            if (this.colunaSort == coluna) {
                this.colunaOrder = (this.colunaOrder == 'asc') ? 'desc' : 'asc';
            }

            // Se é uma coluna diferente, seta a coluna e define como ascendente          
            else
            {               
                this.colunaSort = coluna;
                this.colunaOrder = 'asc';
            }
        }
    },
    computed: {
        // Metódo que faz o sort das colunas, definindo o nome da coluna e a ordem
        orderedUsers: function() {
            return _.orderBy(this.users, this.colunaSort, this.colunaOrder)
        }
    }
});
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/lodash"></script>

<div id="lista">
  <table class="table table-bordered">
    <tr>
      <th><a v-on:click.prevent="sort('nome')">Nome</a></th>
      <th><a v-on:click.prevent="sort('email')">Email</a></th>
    </tr>
    <tr v-for="item in orderedUsers">
      <td>{{item.nome}}</td>
      <td>{{item.email}}</td>
    </tr>
  </table>
</div>

1
  • Perfeito! de grande ajuda =) Commented 14/06/2017 às 12:44

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 .