Vue砌体插件不适用于Vuetify

如何解决Vue砌体插件不适用于Vuetify

我尝试通过vue-masonry插件实现砌体网格。我使用Nuxt和Vuetify。似乎vue-masonry无法与vuetify一起使用。

1. 我将vue-masonry作为插件（vue-masonry.js）连接到我的Nuxt项目

   import Vue from 'vue'
   import {VueMasonryPlugin} from 'vue-masonry'
   
   Vue.use(VueMasonryPlugin)
   

2. 我在nuxt.config.js中设置了插件

   plugins: [
      { src: '~/plugins/vue-masonry',ssr: false }
   ],

3. 接下来，我尝试将vuetify网格与vue-masonry一起使用，这里的东西坏了

    <template>
      <v-container>
        <v-row>
          <v-col
            xs="12"
            sm="6"
            md="4"
            lg="3"
            v-for="card in cards"
            :key="card.id"
            v-masonry
            origin-left="true"
            horizontal-order="true"
            transition-duration="0.3s"
            item-selector=".item"
          >
            <v-card v-masonry-tile class="item" max-width="240">
              <v-card-title>{{card.title}}</v-card-title>
              <v-card-text class="text-ellipsis">{{card.text}}</v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </template>
   
    <script>
    export default {
      data() {
        return {
          cards: [
            {
              id: 1,title: "title",text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make",},{
              id: 2,title: "new one",text:
                "Lorem Ipsum has when an unknown printer took a galley of type and scrambled it to make",{
              id: 3,text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. took a galley of type and scrambled it to make",{
              id: 4,text:
                "Lorem Ipsum is simply dummy. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",{
              id: 5,text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",{
              id: 6,text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry.  a galley of type and scrambled it to make",{
              id: 7,{
              id: 8,text:
                "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the when an unknown printer took a galley",{
              id: 9,text:
                "Lorem Ipsum has been the when an unknown printer took a galley of type and scrambled it to make",{
              id: 10,text: "Lorem Ipsum is simply industry.",],};
      },};
    </script>
   

砌体网格没有出现，只需用卡片清除vuetify cols。

如何使用vuetify实现砌体网格？我会很高兴使用vuetify提出任何建议和实现砌体网格。

解决方法

我用vuetify找到了适用于vue砌体的正确网格解决方案！它就像一个魅力=）

<template>
  <v-container>
    <v-row
      v-masonry
      origin-left="true"
      horizontal-order="true"
      transition-duration="0.3s"
      item-selector=".item"
    >
      <v-col
        v-masonry-tile
        class="item"
        v-for="card in cards"
        :key="card.id"
        xs="3"
        sm="6"
        md="4"
        lg="3"
      >
        <v-card>
          <v-card-title>{{ card.title }} {{ card.id }}</v-card-title>
          <v-card-text>{{ card.text }}</v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>