我在vuetify文档中看到了一个代码块,但我真的不明白为什么他们在v-card组件中使用raw属性?这是一个特殊的属性吗?
有人能帮我理解吗?
- 谢谢你-谢谢
<v-data-iterator :items="items" :page="page">
<template v-slot:default="{ items }">
<template
v-for="(item, i) in items"
:key="i"
>
<v-card v-bind="item.raw"></v-card>
<br>
</template>
</template>
</v-data-iterator>
export default {
data: () => ({
page: 1,
items: Array.from({ length: 15 }, (k, v) => ({
title: 'Item ' + v + 1,
text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi, ratione debitis quis est labore voluptatibus! Eaque cupiditate minima, at placeat totam, magni doloremque veniam neque porro libero rerum unde voluptatem!',
})),
}),
}
字符串
我检查了这个文档,但无法理解它。
https://vuetifyjs.com/en/components/data-iterators/
1条答案
按热度按时间11dmarpk1#
它不是一个特殊的属性,它只是一个item对象。来自
v-slot:default="{ items }"
的数组items
与组件上定义的items
不同,但它是基于它的。类似地,item
不是来自您定义的items
数组的直接对象,但它确实 * 包含 * 该对象,并存储在raw
属性中。您可以通过console.logging或呈现由v-slot提供的items
阵列来自己验证此信息。我从Vuetify文档中获取了示例代码,并将
item
键值对呈现到这个Vuetify Playground的UI中,这样你就可以明白我的意思了。