Table with multiple Radio Button - recover Vue values

Question

I have the following screen:

Who are basically disciplines with their classes.

I’m using Vuejs, where I have an object with JSON with a list Disciplines containing a list of id classes.

The screen is mounted using the code:

<tr v-for="(valor,index) in periodos.Disciplinas">
        <td >
                <input type="checkbox"  v-bind:value="valor.Codigo"
                    v-model="DisciplinaSelecionado" v-on:change="atualizaSimulacao">
        </td>
        <td >
            <h5 class="font-weight-bold">{{valor.Nome}}</h5> 
            {{valor.Codigo}}
            <br />
            IdTurmaSelecionado {{IdTurmaSelecionado}}
            <br />
            <div class="row">
                <div class="col-sm-4" v-for="(turma,index) in valor.Turmas">
                    <input type="radio" 
                            v-bind:name="valor.Codigo"
                            v-bind:value="valor.Codigo + '*' + turma.IDTURMADISC" />
                    <label class="font-weight-bold">Turma: {{turma.IDTURMADISC}}</label>
                </div>
            </div>
        </td>
    </tr>

Usually just add a v-model using a variable created in Vue that recovers the selected value on the radio button. However as there are several separate lines I’m not getting the expected result, because when I add a v-model

<input type="radio" v-bind:name="valor.Codigo"  v-bind:value="valor.Codigo + '*' + turma.IDTURMADISC"   v-model="IdTurmaSelecionado/>

I need an array of all selected Class Id s in each discipline in the Vuejs scope (model).

Answer 1

Hello, Vue already implements a solution to this problem. Since you want to add the items as they are selected. See this example taken from the Vue documentation.

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="example-3">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Nomes assinalados: {{ checkedNames }}</span>
</div>

In this case I simply used the "v-model" i started an empty array and as the user selects it is Adcionado in this array. From a look at Documentation and on the vmodel.