带v-if使用v-slot属性的模板条件

Question

我正在尝试创建一个条件来启用一个命名槽，如下所示：

<template v-slot:item="{ item }" v-if="item.loading">
  <v-progress-circular indeterminate color="primary"></v-progress-circular>
</template>

我的用例是一个Vuetify :每个项目都有一个“加载”属性，并且我只想在行正在加载时激活“项目”插槽(“项目”插槽是用来替换行的默认呈现的插槽)。

错误是item没有在v-if中定义，这似乎是逻辑: item只为template子标记定义。

有没有办法解决这个问题？

Answer 1

我也遇到过类似的问题，我在Vuetify 2中解决了这个问题，我将VDataTable/Row导入为“v-data- table -row”，并使用它来呈现“常规”表行，而对于自定义行，我使用了自己的模板。

JavaScript

    import Row from 'vuetify/lib/components/VDataTable/Row.js';

    export default {
        components: { 'v-data-table-row': Row },
        data() {
            return {
                currentItemName: 'Ice cream sandwich'
            }
        }
         // headers, items, etc...
    }

HTML

    <template v-slot:item="{ item }">
      <tr v-if="item.name == currentItemName" class="blue-grey lighten-4">
        <td>Custom prefix - {{ item.name }}</td>
        <td colspan="2">{{ item.calories }} - Custom suffix</td>
      </tr>
      <v-data-table-row v-else :headers="headers" :item="item">
        <template
          v-for="(index, name) in $scopedSlots"
          v-slot:[name.substr(5)]="data"
        >
          <slot
            v-if="name.substr(0, 5) === 'item.'"
            :name="name"
            v-bind="data"
          ></slot>
        </template>
      </v-data-table-row> </template

您可以查看工作示例here。

Answer 2

您可以只将v-if放在子元素上

<template #item="{ item }">
    <v-progress-circular
        v-if="item.loading"
        color="primary"
        indeterminate
    ></v-progress-circular>
</template>