使用 v-if 使用 v-slot 属性在模板上设置条件答案

【问题标题】：Condition on template with v-if using v-slot prop使用 v-if 使用 v-slot 属性在模板上设置条件
【发布时间】：2020-02-25 15:09:25
【问题描述】：

我正在尝试创建一个条件来启用这样的命名插槽：

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

我的用例是一个 Vuetify 数据表：每个项目都有一个“加载”属性，我想只有在行正在加载时才激活“项目”插槽（“项目”插槽是替换默认渲染的插槽一行）

错误是item在v-if中未定义，这似乎是逻辑：项目仅为template子标签定义。

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

【问题讨论】：

标签： vue.js vuejs2 vuetify.js

【解决方案1】：

~~您可以使用计算属性过滤传递给数据表的项目。~~

你可以不根据加载交换元素吗？

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    items: [{data : "", loading: true}, {data : "Some data", loading: false}]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="item in items">
    <div>
      <div v-if="item.loading">
        Loading...
      </div>
      <div v-else>
        {{item.data}}
      </div>
    </div>

  </div>
</div>

【讨论】：

这是个好主意，但我想特别向用户展示该行正在加载
啊，那你能把 v-if 移到 v-progress-circular 吗？
这就是重点：如果我这样做，模板会“覆盖”默认的线渲染，因此当加载为 false 时，不会渲染任何内容
我编辑了答案你不能这样做吗？
不，不可能我没有做 v-for，数据表正在做

【解决方案2】：

我遇到了类似的问题，我在 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。

【讨论】：