CODEWITHSUNDEEP
javascriptwebvue.jsvuejs2vue-component
RCO
RCO

Reputation: 21

Vue: Access component object properties

I'm trying to use a statement within a element:

v-if="currentstep < maxStep"

The maxStep should be obtained from the number of components listed on my defauld export

  export default {
    name: 'step',
    data () {
      return {
        maxStep: 8,
        currentstep: 0
      }
    },
    components: {
      ConfigPublicador,
      ConfigServico,
      ModeloReceita,
      Integracoes,
      ConfigTema,
      ConfigApp,
      ConfigExtras,
      Assets,
      Revisao
    }
  }

Something like

maxStep = components.length

Any Ideias? Thanks

Upvotes: 0

Views: 1458

Answers (1)

thanksd
thanksd

Reputation: 55634

This is definitely a code smell. But, you can get that value via Object.keys(this.$options.components).length.

Here's an example:

const Foo = {
  template: '<div></div>',
}

new Vue({
  el: '#app',
  components: { Foo },
  data() {
    return {
      count: 0,
    }
  },
  created() {
    this.count = Object.keys(this.$options.components).length;
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <div v-if="count > 0">
    There is at least one component
  </div>
</div>

Upvotes: 1

Related Questions