Vue砌体插件不适用于Vuetify

问题描述

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

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

import Vue from 'vue'
import {VueMasonryPlugin} from 'vue-masonry'

Vue.use(VueMasonryPlugin)

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

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

接下来，我尝试将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>

nuxt.js vue.js vuetify.js