Vue.js v数据表行的单个v选择

我试图创建一个表，允许我为“available”列的每一行使用一个v-select，并保存用户选择的任何内容，即该列的“库存”或“不可用”。对于包含以下数据的下表，我应该如何准确地做到这一点

表:

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

---

使用

v-选择

并将其绑定到

项目。可在项目槽模板上找到

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

{{item.name}
{{item.carries}
{{item.fat}
{{item.carbs}
{{item.protein}}

---

@Zim是的，最初没有设置，我想使用v-select中可用的选项进行设置

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