Working with Vue: Retrieving component object attributes

Question

Working with Vue: Retrieving component object attributes

Looking for a way to include a statement inside an element:

v-if="currentstep < maxStep"

I want to dynamically set the value of maxStep based on the number of components listed in my default export:

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

Is there a way to achieve something like this?

maxStep = components.length

Any suggestions or ideas would be greatly appreciated. Thank you.

javascript web vue.js vuejs2 vue-component

Answer 1

Answer №1

This situation is a classic code smell, but fear not! You can extract that value using the method

Object.keys(this.$options.components).length

.

Check out this sample below:

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

new Vue({
  el: '#app',
  components: { Bar },
  data() {
    return {
      total: 0,
    }
  },
  created() {
    this.total = 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="total > 0">
    There exists at least one component
  </div>
</div>

Answer 2

This situation is a classic code smell, but fear not! You can extract that value using the method

Object.keys(this.$options.components).length

.

Check out this sample below:

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

new Vue({
  el: '#app',
  components: { Bar },
  data() {
    return {
      total: 0,
    }
  },
  created() {
    this.total = 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="total > 0">
    There exists at least one component
  </div>
</div>

Working with Vue: Retrieving component object attributes

Answer №1

Similar questions

Installing packages does not function properly on Atom

While tidying up the code in my home.vue file for my Vue.js project, I am constantly encountering these pesky errors

Substitute the symbol combination (][) with a comma within Node.js

Prevent the div from moving beyond the boundaries of its container while anim

Issues with React Native imports not functioning properly following recent upgrade

What is the best way to implement the 'setInterval' function in this code to effortlessly fetch forms or data on my webpage without any need for manual refresh?

How to Retrieve Superclass Fields in Angular 5 Component

What could be causing the code to malfunction and prevent window.ethereum from working properly?

What is the reason for the num pad being classified as a character?

Update perspective following ajax request in AngularJS

What is the best way to display a placeholder instead of the state's value when a page loads?

Easy Steps for Mapping Json Data into an Array

Having trouble sorting data-text values that include colspan cells

Why do `resolutions` not receive support in package.json like they do in bower.json?

The problem with setting headers in Node Express MySQL: Error message indicating headers cannot be set after they have been sent

Clearing the JSON data from the file object

Enhance your search experience with Vue.js by highlighting important keywords across multiple search

Sharing Variables with $(document).ready

Tips for delaying the execution of numerous ajax success callbacks?

Issue with JQuery Ajax button functionality