VUE JS Consuming API and using V-FOR with 2 tables

Question

VUE JS Consuming API and using V-FOR with 2 tables

Navigation

#1 by (2 votes)

0

I have 2 tables

Table 1

[
{"Id": "1", "nome": "João"},
{"Id": "2", "nome": "Manoel"}
]

Table 2

[
{"Estudante": "1", "nota": "5", "avaliação": "1"},
{"Estudante": "1", "nota": "6", "avaliação": "2"},
{"Estudante": "1", "nota": "7", "avaliação": "3"},
{"Estudante": "1", "nota": "8", "avaliação": "4"},
{"Estudante": "2", "nota": "3", "avaliação": "1"},
{"Estudante": "2", "nota": "5", "avaliação": "2"},
{"Estudante": "2", "nota": "8", "avaliação": "3"},
{"Estudante": "2", "nota": "9", "avaliação": "4"}
]

I need to render as follows

 Estudante: Jose
 Evaluation 1 | nota 5
 Evaluation 2 | nota 6
 Evaluation 3 | nota 7
 Evaluation 4 | nota 8

 Estudante: Mark
 Evaluation 1 | nota 3
 Evaluation 2 | nota 5
 Evaluation 3 | nota 8
 Evaluation 4 | nota 9

I'm using the v-resource calling PHP data from Table 1 which is the list of students and using V-FOR to display

 <Div v-for="Estudante in Estudantes">
 Estudante {{Estudante.nome}}
 </Div>

Now I would need within this first V-FOR, invoke another $ HTTP.POST by passing the ID to the query to bring me only the data related to the particular student within the loop.

What is the best way to run this system?

vue.js

asked by anonymous 27.12.2016 / 14:30

1 answer

Identify the status of a program with java Java Search Box

score 2 · Answer 1

You need to create a dynamic value, with computed , and then you can create a script that merge this data like this:

  computed: {
    Alunos: function() {
      var notas = this.Notas;
      return this.Estudantes.map(function(estudante) {
        estudante.notas = [];
        notas.forEach(function(entrada) {
          if (entrada.Estudante == estudante.Id) estudante.notas.push(entrada)
        });
        return estudante;
      });
   }

Example:

var nomes = [{
  "Id": "1",
  "nome": "João"
}, {
  "Id": "2",
  "nome": "Manoel"
}];

var notas = [{
  "Estudante": "1",
  "nota": "5",
  "avaliação": "1"
}, {
  "Estudante": "1",
  "nota": "6",
  "avaliação": "2"
}, {
  "Estudante": "1",
  "nota": "7",
  "avaliação": "3"
}, {
  "Estudante": "1",
  "nota": "8",
  "avaliação": "4"
}, {
  "Estudante": "2",
  "nota": "3",
  "avaliação": "1"
}, {
  "Estudante": "2",
  "nota": "5",
  "avaliação": "2"
}, {
  "Estudante": "2",
  "nota": "8",
  "avaliação": "3"
}, {
  "Estudante": "2",
  "nota": "9",
  "avaliação": "4"
}];
new Vue({
  el: '#app',
  data: {
    Estudantes: nomes,
    Notas: notas
  },
  computed: {
    Alunos: function() {
      var notas = this.Notas;
      return this.Estudantes.map(function(estudante) {
        estudante.notas = [];
        notas.forEach(function(entrada) {
          if (entrada.Estudante == estudante.Id) estudante.notas.push(entrada)
        });
        return estudante;
      });
    }
  }
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.7/vue.js"></script><scriptsrc="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
<div id="app">
  <ul>
    <li v-for="Estudante in Alunos">
      Estudante: {{ Estudante.nome }}
      <ul>
        <li v-for="notas in Estudante.notas">
          Evaluation {{notas['avaliação']}} | nota {{notas.nota}}
        </li>
      </ul>
    </li>
  </ul>
</div>