Vue-按钮在v-data-table中不可见

Question

我对v-data-table有问题。我想添加按钮以进行编辑，删除并将新产品添加到我的v数据表中。数据来自我的REST API，并通过我的getter CARS分配给v-data-table。一切都很好，每行都显示了，但是按钮没有显示....我尝试了很多不同的方法，但仍然无法正常工作。如果您能帮助我，我将不胜感激。最好的问候！

这是我的代码。

<v-data-table
    v-model="selected"
  :headers="headers"
  :items=CARS
  :single-select="singleSelect"
   item-key="id"
    show-select class="elevation-1" 
>
  <template slot="items" slot-scope="props">


      <td>{{ props.item.id }}</td>
      <td>{{ props.item.vin }}</td>
      <td>{{ props.item.register_number}}</td>
      <td>{{ props.item.cost}}</td>
      <td>{{ props.item.latitude }}</td>
      <td>{{ props.item.longitude}}</td>
      <td>{{ props.item.service}}</td>
      <td>{{ props.item.reservation}}</td>
       <td class="justify-content-left layout">
      <v-btn icon @click.prevent="editUser(props.item)">
         <v-icon color="blue">edit</v-icon>
      </v-btn>
      </td>
  </template>
</v-data-table>

Answer 1

我认为您正在使用旧版本的Vuetify。请更新您的Vue和Vuetify版本，然后尝试使用此示例。

[[v-data-table crud actions] [1]

  [1]: https://codepen.io/pen/?&editable=true&editors=101