Table with multiple Radio Button-retrieve Vue values

Question

Table with multiple Radio Button-retrieve Vue values

I have the following screen:

Which are basically disciplines with their classes.

I'm using VueJs, where I have an object with JSON with a list disciplines that contains a list of Id classes.

The screen is assembled 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 retrieves the selected value in the radio button. But how are several separate rows I am not getting the expected result since 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 with all the class Ids selected in each discipline in the scope of Vuejs (model).

0

vue.js typescript nativescript vue.js-2

Author: Jothaz, 2020-01-04

Source

1 answers

score 0 · Answer 1

Hello, vue already implements a solution to this problem. In view that 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 is selecting is added to this array. At a glance at the documentation and about the vmodel.