这个raw属性在vuetify上的v-for指令中意味着什么?

ozxc1zmp  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(115)

我在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/

11dmarpk

11dmarpk1#

它不是一个特殊的属性,它只是一个item对象。来自v-slot:default="{ items }"的数组items与组件上定义的items不同,但它是基于它的。类似地,item不是来自您定义的items数组的直接对象,但它确实 * 包含 * 该对象,并存储在raw属性中。您可以通过console.logging或呈现由v-slot提供的items阵列来自己验证此信息。
我从Vuetify文档中获取了示例代码,并将item键值对呈现到这个Vuetify Playground的UI中,这样你就可以明白我的意思了。

相关问题