Uncaught TypeError: Cannot read property 'getBoundingClientRect' of undefined

[RobSteward]

I'm using the wall to display a custom card component like so:

<div v-else>
      <v-row dense>
        <vue-masonry-wall
          :items="rules"
          :options="masonryOptions"
          :ssr="{ columns: 3 }"
        >
          <template v-slot:default="{ item }">
            <LazyRuleCard :rule="item" />
          </template>
        </vue-masonry-wall>
      </v-row>
    </div>

• rules is a computed property passed from Vuex store that's bound to Firestore.
• RuleCard is a component like so

<template>
  <v-card elevation="3" tile>
    <v-card-title>
        {{ rule.title }}
    </v-card-text>
     ... And so on
    <v-card-actions>
      Some card actions
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  props: ['rule'],
}
</script>

• masonryOptions is returned from data like so

 masonryOptions: {
        width: 300,
        padding: {
          default: 12,
          1: 6,
          2: 8,
        },
      },

While the rules are displayed, I get this error in console. What am I doing wrong? Seems like this gets called for each of the 7 test rules that I have.

[RobSteward]

@fuxingloh Just to check - is this something your still actively developing or should I look for other packages?

[fuxingloh]

@fuxingloh Just to check - is this something your still actively developing or should I look for other packages?

I am so sorry @RobSteward, you should look for other packages if this does not fit your use case. I am little busy with my day job now.

[RobSteward]

Hi, No worries at all - I will look around. I wast just wondering if it makes sense to wait :) Good attempt though, I did like the approach.