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

Question

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 this way

 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 am using v-Resource calling the data by PHP from Table 1 which is the student list and using V-FOR to display

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

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

How best to implement this system?

Answer 1

You have to create a dynamic value, with computed, and then you can create a script that merges that 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>
<script src="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>