Question

177

Vuetify - How to select a row data using v-radio-group in v-data-table

rated 0 times [ 179] [ 2] / answers: 1 / hits: 5250 / 4 Years ago, tue, may 19, 2020, 12:00:00

I am trying to select a radio button in a row but if i select one in a row it is automatically selecting other in that row.
Sample Example

This is how the radio button code in table data.

<v-radio-group v-model=selected>

  <v-radio :value=props.item.name :label=props.item.fat/>

</v-radio-group>

What i wanted to do here is, in the above example there are 2 radio buttons in each row, i just wanted to select only one radio button per row. It seems it is working like a column level selection instead of row level selection. How can i make this as a row level selection?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazminuniquer

Add To Favorites

Follow

Total Points: 63

Total Questions: 121

Total Answers: 96

Location: Cambodia

Member since Thu, May 21, 2020

4 Years ago

jazminuniquer questions

1 Next.js change locale for the current path that has query, using router

Sat, Nov 20, 21, 00:00, 3 Years ago

1 Error: bundle initial-es5 exceeded maximum budget. Budget 6.00 MB was not met by 133.51 kB with a total of 6.13 MB

Thu, Feb 18, 21, 00:00, 3 Years ago

1 How to get values from client.users.fetch(id) in discord.js

Thu, Sep 3, 20, 00:00, 4 Years ago

1 Apply motion to react component Framer-Motion

Thu, Jun 25, 20, 00:00, 4 Years ago

1 How to change the background color when I click a < li> in Angular?

Fri, Feb 21, 20, 00:00, 4 Years ago

View All

answered 4 Years ago adrienb · Accepted Answer

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>