CODEWITHSUNDEEP
vue.jsdatatablevuejs2vuetify.js
Otorrinolaringologista -man
Otorrinolaringologista -man

Reputation: 1137

Individual v-selects for v-data-table rows

I am trying to create a table that allows me to have one v-select for each row of the "available" column and to save whatever the user selects, being either "In stock" or "unavailable" for that column. How exactly do i do that with the following table that contains the following data?

Table:

<template>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
            <tr @click="props.expanded = !props.expanded">
              <td class="text-xs-right">{{ props.item.name}}</td>
              <td class="text-xs-right">{{ props.item.calories}}</td>
              <td class="text-xs-right">{{ props.item.fat}}</td>
              <td class="text-xs-right">{{ props.item.carbs}}</td>
              <td class="text-xs-right">{{ props.item.protein}}</td>
              <td class="text-xs-right">{{ props.item.available}}</td>
            </tr>
          </template>
  </v-data-table>
</template>

Data:

desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            available: '',
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            available: '',
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            available: '',
          },

Upvotes: 1

Views: 62

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362290

Use v-select and bind it to item.available on the item slot template...

   <template v-slot:item="{ item }">
        <tr>
            <td>{{item.name}}</td>
            <td>{{item.calories}}</td>
            <td>{{item.fat}}</td>
            <td>{{item.carbs}}</td>
            <td>{{item.protein}}</td>
            <td>
                <v-select
                v-model="item.available"
                :items="['in stock','unavailable']">
                </v-select>
            </td>
        </tr>
   </template>

https://codeply.com/p/9zqiPQEl80

Upvotes: 1

Related Questions