javascript - 如何在 v-data-iterator 中获取自定义插槽？
问题描述
是否可以在 v-data-iterator 中获得自定义插槽？对于这个例子，我想在卡路里槽内更改“卡路里”文本的颜色，并将“千卡”文本添加到值中。
我想得到什么：
我试过这样的事情：
<!-- Custom slot for Calories -->
<template v-slot:item="calories">
<v-list-item>
<v-list-item-content :class="{ 'blue--text': sortBy === key }">
<!-- Custom value here (green color) -->
<span style="color: green;">Calories:</span>
</v-list-item-content>
<v-list-item-content class="align-end" :class="{ 'blue--text': sortBy === key }">
<!-- Custom value here (+ kcal) -->
{{ item.calories }} kcal
</v-list-item-content>
</v-list-item>
</template>
卡路里部分的正确“v-slot：”值应该是多少？有没有其他方法可以分隔特定部分？
HTML 代码：
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-data-iterator
:items="items"
:items-per-page.sync="itemsPerPage"
:page.sync="page"
:search="search"
:sort-by="sortBy.toLowerCase()"
:sort-desc="sortDesc"
hide-default-footer
>
<template v-slot:header>
<v-toolbar
dark
color="blue darken-3"
class="mb-1"
>
<v-text-field
v-model="search"
clearable
flat
solo-inverted
hide-details
prepend-inner-icon="mdi-magnify"
label="Search"
></v-text-field>
<template v-if="$vuetify.breakpoint.mdAndUp">
<v-spacer></v-spacer>
<v-select
v-model="sortBy"
flat
solo-inverted
hide-details
:items="keys"
prepend-inner-icon="mdi-magnify"
label="Sort by"
></v-select>
<v-spacer></v-spacer>
<v-btn-toggle
v-model="sortDesc"
mandatory
>
<v-btn
large
depressed
color="blue"
:value="false"
>
<v-icon>mdi-arrow-up</v-icon>
</v-btn>
<v-btn
large
depressed
color="blue"
:value="true"
>
<v-icon>mdi-arrow-down</v-icon>
</v-btn>
</v-btn-toggle>
</template>
</v-toolbar>
</template>
<template v-slot:default="props">
<v-row>
<v-col
v-for="item in props.items"
:key="item.name"
cols="12"
sm="6"
md="4"
lg="3"
>
<v-card>
<v-card-title class="subheading font-weight-bold">
{{ item.name }}
</v-card-title>
<v-divider></v-divider>
<v-list dense>
<v-list-item
v-for="(key, index) in filteredKeys"
:key="index"
>
<v-list-item-content :class="{ 'blue--text': sortBy === key }">
{{ key }}:
</v-list-item-content>
<v-list-item-content
class="align-end"
:class="{ 'blue--text': sortBy === key }"
>
{{ item[key.toLowerCase()] }}
</v-list-item-content>
</v-list-item>
</v-list>
</v-card>
</v-col>
</v-row>
</template>
<template v-slot:footer>
<v-row
class="mt-2"
align="center"
justify="center"
>
<span class="grey--text">Items per page</span>
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn
dark
text
color="primary"
class="ml-2"
v-bind="attrs"
v-on="on"
>
{{ itemsPerPage }}
<v-icon>mdi-chevron-down</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(number, index) in itemsPerPageArray"
:key="index"
@click="updateItemsPerPage(number)"
>
<v-list-item-title>{{ number }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-spacer></v-spacer>
<span
class="mr-4
grey--text"
>
Page {{ page }} of {{ numberOfPages }}
</span>
<v-btn
fab
dark
color="blue darken-3"
class="mr-1"
@click="formerPage"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
<v-btn
fab
dark
color="blue darken-3"
class="ml-1"
@click="nextPage"
>
<v-icon>mdi-chevron-right</v-icon>
</v-btn>
</v-row>
</template>
</v-data-iterator>
</v-container>
</v-app>
</div>
JS代码：
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
itemsPerPageArray: [4, 8, 12],
search: '',
filter: {},
sortDesc: false,
page: 1,
itemsPerPage: 4,
sortBy: 'name',
keys: [
'Name',
'Calories',
'Fat',
'Carbs',
'Protein',
'Sodium',
'Calcium',
'Iron',
],
items: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%',
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '8%',
iron: '1%',
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%',
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
sodium: 413,
calcium: '3%',
iron: '8%',
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
sodium: 327,
calcium: '7%',
iron: '16%',
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
sodium: 50,
calcium: '0%',
iron: '0%',
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: '0%',
iron: '2%',
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: '0%',
iron: '45%',
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
sodium: 326,
calcium: '2%',
iron: '22%',
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
sodium: 54,
calcium: '12%',
iron: '6%',
},
],
}
},
computed: {
numberOfPages () {
return Math.ceil(this.items.length / this.itemsPerPage)
},
filteredKeys () {
return this.keys.filter(key => key !== 'Name')
},
},
methods: {
nextPage () {
if (this.page + 1 <= this.numberOfPages) this.page += 1
},
formerPage () {
if (this.page - 1 >= 1) this.page -= 1
},
updateItemsPerPage (number) {
this.itemsPerPage = number
},
},
})
解决方案
没有正确的 v-slot可以执行此操作。
您的值在v-list-item-content中，但不在一般v-data-iterator中。不幸的是， v-list-item-content 只有默认插槽。
但是你可以这样解决你的问题：
...
<v-list dense>
<v-list-item
v-for="(key, index) in filteredKeys"
:key="index"
>
<v-list-item-content :class="{ 'blue--text': sortBy === key }">
<span v-if="key === 'Calories'" style="color: green">
{{ key }}:
</span>
<span v-else>
{{ key }}:
</span>
</v-list-item-content>
<v-list-item-content
class="align-end"
:class="{ 'blue--text': sortBy === key }"
>
<span v-if="key === 'Calories'">
{{ item[key.toLowerCase()] + ' kcal' }}
</span>
<span v-else>
{{ item[key.toLowerCase()] }}
</span>
</v-list-item-content>
</v-list-item>
</v-list>
...
推荐阅读
- android - 如何重新绑定到正在运行的服务？
- python - 选择数据帧不同部分的方法比 for 循环更快？
- c# - .NET Real-Time 和 TaskMgr 实时优先级有什么区别？
- c# - C# dotnet "Require" 和断言
- android - 如何使用 FIrebaseRecyclerAdapter 进行 recyclerview 设置与视图模型保持一致？
- java - 为什么使用“node.getNext( ) == null”作为失效节点的约定？
- python - 如何将 SQL 查询的结果从 Databricks 导出到 Azure Data Lake Store
- javascript - 当您单击按钮时，如何获得一个播放音频的 img 按钮？
- sh - rlwrap 命令替换中的 Ctrl-C 停止回显
- c# - 我如何尽量减少 else if 语句的使用？