Organizing vue js components?

Question

JavaScript

There is a page with 30 connected components, when a user visits it, we download an array with data from json. From json we get which components we show and which we don’t (via v-if). More or less like this:

<comp1 v-if="(Q === 1 && B === 1) || (Q === 2 && B === 1)"
<comp2 v-if="(Q === 1 && B === 2) || (Q === 2 && B === 2)"
<comp3 v-if="(Q === 1 && B === 3) || (Q === 2 && B === 3)"
<comp4 v-if="(Q === 1 && B === 4) || (Q === 2 && B === 4)"

Is everything implemented correctly? Is it possible to generate components somehow from json ?

Answer 1

What you have shown looks rather ugly. It can be simplified by adding the component names to an array and adding a computed property:

data: () => ({
  componentNames: [ 'comp1', 'comp2', 'comp3', 'comp4' ],
  ...
}),
computed: {
  componentName() {
    return [ 1, 2 ].includes(this.Q) && this.componentNames[this.B - 1];
  },
},

<component :is="componentName"></component>
UPD. If you additionally need to pass parameters, then instead of component names, you can store objects in the array that will contain the name and set of parameters:

data: () => ({
  components: [
    { name: '...', props: { ... } },
    { name: '...', props: { ... } },
    ...
  ],
  ...
}),

The computed property will not change (except for the name, of course), and the template will look like this:

<component
  v-if="component"
  :is="component.name"
  v-bind="component.props"
></component>

https://jsfiddle.net/69xv0b47/

Answer 2

Well, of course, this is not correct, you can get confused. It is better that your json already has some key by which you will display the desired component