使用 v-slot prop 对模板进行条件化

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

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

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

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>