[Vuejs]-Vuetify theme in dynamic Vue Component

by

0👍

The solution was to not dynamically create the component but instead add the component to an array and use v-for in the body to iterate over them. The other trick with using Muuri was to wait for the next tick so Vuetify could mount the component before we add it to the Muuri grid.

Template:

 <div class="grid">
  <div
    class="item"
    v-for="(def, index) in definitions"
    :key="index"
    ref="gridItem"
  >
    <div class="item-content">
      <CosmosScreen :definition="def" />
    </div>
  </div>
</div>

Script:

import CosmosScreen from './CosmosScreen'
import * as Muuri from 'muuri'

export default {
  components: {
    CosmosScreen
  },
  data() {
    return {
      grid: null
      definitions: []
    }
  },
  mounted() {
    this.grid = new Muuri('.grid', {
      dragEnabled: true
    })
  },
  methods: {
    showScreen() {
      this.definitions.push("Screen Definition")
      this.$nextTick(function() {
        this.grid.add(this.$refs.gridItem[this.$refs.gridItem.length - 1])
      })
    }
  }
}

The CosmosScreen component details aren’t important here but it takes a string and dynamically creates a screen of Vuetify widgets.

Leave a comment