Отдельные v-выборки для строк v-data-table - PullRequest
Новая
       32

Отдельные v-выборки для строк v-data-table

1 голос
/ 30 марта 2020

Я пытаюсь создать таблицу, которая позволяет мне выбрать один v-select для каждой строки столбца «available» и сохранить все, что выберет пользователь, будь то «В наличии» или «недоступно» для этого столбца. Как именно это сделать со следующей таблицей, содержащей следующие данные?

Таблица: 

<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>

Данные: 

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: '',
          },

1 Ответ

1 голос
/ 30 марта 2020

Используйте v-select и привяжите его к item.available в шаблоне слота предмета ... 

   <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

...