[Vuejs]-Vuetify – How to select a row data using v-radio-group in v-data-table

by

0👍

✅

In your example, there are two things that stop it from working as you would like.

First: get rid of @click="selected = props.item.name" as this is is triggering click on the row.

Second: you are binding <v-radio-group v-model="selected" to selected in both columns. You have 6 radio buttons but only 3 items. This is where the mistake is. If you split selected into two groups (selectedCalories and selectedFat) such as:

 <template slot="items" slot-scope="props">
          <tr >
          <td>{{ props.item.name }}</td>
          <td class="text-xs-right">
            <v-radio-group v-model="selectedCalories">
              <v-radio :value="props.item.name" :label="props.item.calories"/>
            </v-radio-group>
            </td>
          <td class="text-xs-right">
            <v-radio-group v-model="selectedFat">
              <v-radio :value="props.item.name" :label="props.item.fat"/>
            </v-radio-group>
           </td>
        </tr>
      </template>

It will work as you wish.

Remember you will need now two references in your data:

selectedCalories: [],
selectedFat: [],

UPDATE:

To select only one in a row, value needs to be different between v-radio such as:

<template slot="items" slot-scope="props">
          <tr >
          <td>{{ props.item.name }}</td>

          <td class="text-xs-right">
            <v-radio-group v-model="selectedCalories">
              <v-radio :value="props.item.calories" :label="props.item.calories"/>
            </v-radio-group>
            </td>
          <td class="text-xs-right">
            <v-radio-group v-model="selectedFat">
              <v-radio :value="props.item.fat" :label="props.item.fat"/>
            </v-radio-group>
           </td>
        </tr>
      </template>

You will still need two selected items in data:.

    selectedFat: [],
    selected: [],

UPDATE – select one per row:

<template slot="items" slot-scope="props">
          <tr>
          <td>{{ props.item.name }}</td>

          <td class="text-xs-right">
            <v-radio-group v-model="props.item.selected">
              <v-radio :value="props.item.calories" :label="props.item.calories"/>
            </v-radio-group>

          </td>
          <td class="text-xs-right">
            <v-radio-group v-model="props.item.selected">
              <v-radio :value="props.item.fat" :label="props.item.fat"/>
            </v-radio-group>
          </td>
        </tr>
</template>

Leave a comment