Access component data structure from parent object in Vue.js

Question

I have main component with dynamicaly created components like this:

<template>
  <div class="box">
<component v-for="node in nodes" v-bind:is="node.type" :id="node.id" :nodes="node.nodes" :key="node.id">
</component>

<button type="button" v-on:click="addFormElement('Block', id, metaData)">Add Layout</button>
<button type="button" v-on:click="addFormElement('ModelAuto', id, ModelAuto.metaData)">Add ModelAuto</button>

</div>
</template>
<script>
import Block from "@/components/elems/Block.vue";
import ModelAuto from "@/components/elems/ModelAuto.vue";

export default {
  name: "Block",
  props: [ 'id', 'nodes', 'type' ],

And I need to pass data structure of imported components in v-on:click methods. For example in line

<button type="button" v-on:click="addFormElement('ModelAuto', id, ModelAuto.metaData)">Add ModelAuto</button>

I'd like to pass object with name metaData from data section of ModelAuto component.

In ModelAuto component data section looks like:

export default {
  name: "ModelAuto",
  props: [ 'id', 'nodes', 'type' ],
  data: function() {
      return {
          metaData: {
              modelNum: 8
          }
      }
  }
}

What is the right way to do this?

Shizzen83 · Accepted Answer · 2020-05-17 12:40:44Z

1

You're trying to get some data which belong to a component instance via the component "class". It's the same issue that accessing statically an instance property in PHP.

To make it work, you may add a named export to your component file

export const metaData = {
  modelNum: 8
}

export default {
  name: "ModelAuto",
  props: [ 'id', 'nodes', 'type' ],
  data: function() {
      return {}
  }
}

It allows you to import your component as usually by

import ModelAuto from "@/components/elems/ModelAuto.vue";

But you can also do

import ModelAuto, { metaData as modelAutoMetaData } from "@/components/elems/ModelAuto.vue";

export default {
  name: "Block",
  props: [ 'id', 'nodes', 'type' ],
  data () {
    return {
      modelAutoMetaData
    }
  }
}

You can finally do this

<button type="button" v-on:click="addFormElement('ModelAuto', id, modelAutoMetaData)">Add ModelAuto</button>

edited May 17, 2020 at 12:40

answered May 17, 2020 at 12:34

Shizzen83

3,5593 gold badges14 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access component data structure from parent object in Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related