SpaceBase.vue

<template>
  <div v-for="(nodes, index) in myArray" :key="index">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1000 10000"
      onload="makeDraggable(evt)"
    >
      <g class="draggable-group">
        <rect width="150" height="200" style="fill: rgb(255, 0, 100)" />
        <foreignObject id="x" x="10" width="131" height="100">
          <textarea rows="3" cols="30" v-model="nodes.node_text"></textarea>
        </foreignObject>
      </g>
    </svg>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapState } from 'vuex'
import drag from '@/mixins/drag'

export default {
  name: 'SpaceBase',
  components: {},
  data() {
    return {
      myArray: [],
    }
  },

  computed: {
    ...mapState({
      myNodes: (state) => state.myNodes,
      otherNodes: (state) => state.otherNodes,
      allEmoji: (state) => state.allEmoji,
    }),
  },

  props: {
    added: Boolean,
  },

  watch: {
    added: function () {
      setTimeout(this.loadData, 500)
    },
  },

  methods: {
    loadData() {
      var nodesFiltered = this.myNodes.myNodes.filter(
        (nodes) => nodes.node_deleted == false
      )
      // this should probably be on the tool bar NOT HERE really
      this.$store.dispatch('getMynodes')
      this.$store.dispatch('getEmoji')
      this.$store.dispatch('getPositions')

      this.myArray = nodesFiltered.reverse()
    },
  },

  mixins: [
    drag('something', function () {
      // drag
    }),
  ],

  mounted() {
    setTimeout(this.loadData, 500)
    if (localStorage.nogg_name && localStorage.nogg_microcosm) {
      var devicename = localStorage.nogg_name
      var microcosm = localStorage.nogg_microcosm
      this.$store.dispatch('setMicrocosm', { devicename, microcosm })
      // this.$store.dispatch('getEmoji')
      // this.$store.dispatch('getPositions')
    } else {
      console.log('no')
      // go home
    }
  },
}
</script>

<style scoped>
.draggable,
.draggable-group {
  cursor: move;
}

.static {
  cursor: not-allowed;
}
</style>