Boucle VueJS en incrémentant des préfixes de nom de composant

Question

J'ai une application VueJS qui est une forme en plusieurs étapes, chaque étape du formulaire est un nouveau composant car ils contiennent chacun une logique, des vues, des scripts et des styles différents.

J'ai nommé les composants, section1, section2, section3 etc .. Les données transmises par le parent, applicationForm composant reste un style similaire, :errors="errors.section1" :warnings="warnings.section1" :form-data-"formData.section1"

Ma pensée a été au lieu de dupliquer le code et changer le numéro de section numérique chaque fois, si je pouvais le mettre dans un for loop pour le rendre plus facile à gérer. Ainsi, le ci-dessous:

<section1 v-if="(step == 1)" class="relative" :errors="errors.section1 || {}" :warnings="warnings.section1 || {}" :form-data="formData.sections.section1 || {}" :user="user"></section1> 
<section2 v-if="(step == 2)" class="relative" :errors="errors.section2 || {}" :warnings="warnings.section2 || {}" :form-data="formData.sections.section2 || {}" :user="user"></section2> 
<section3 v-if="(step == 3)" class="relative" :errors="errors.section3 || {}" :warnings="warnings.section3 || {}" :form-data="formData.sections.section3 || {}" :user="user"></section3> 
<section3 v-if="(step == 4)" class="relative" :errors="errors.section4 || {}" :warnings="warnings.section4 || {}" :form-data="formData.sections.section4 || {}" :user="user"></section3> 
<section3 v-if="(step == 5)" class="relative" :errors="errors.section5 || {}" :warnings="warnings.section5 || {}" :form-data="formData.sections.section5 || {}" :user="user"></section3> 
<section3 v-if="(step == 6)" class="relative" :errors="errors.section6 || {}" :warnings="warnings.section6 || {}" :form-data="formData.sections.section6 || {}" :user="user"></section3> 
<section3 v-if="(step == 7)" class="relative" :errors="errors.section7 || {}" :warnings="warnings.section7 || {}" :form-data="formData.sections.section7 || {}" :user="user"></section3> 
<section3 v-if="(step == 8)" class="relative" :errors="errors.section8 || {}" :warnings="warnings.section8 || {}" :form-data="formData.sections.section8 || {}" :user="user"></section3> 

se transforme en quelque chose comme (je ne sais pas l'approche mais correcte):

<section{n} v-for="n in 8" class="relative" :errors="errors.section{n} || {}" :warnings="warnings.section{n} || {}" :form-data="formData.sections.section{n} || {}" :user="user"></section1> 

Est-ce possible? Ou en raison de la façon dont l'objet data est utilisé, ce n'est pas?

Answer 1

Vous pouvez le faire en utilisant l'élément <component> réservé avec l'attribut :is.

En savoir plus sur Dynamic Component

Vous devez faire de cette façon,

<component v-for="n in 8" :is="'section'+n" class="relative" :error="errors['section'+n] || {}" :warnings="warnings['section'+n] || {}" :form-data="formData.sections['section'+n] || {}" :user="user"></component> 

• <component> est un élément constitutif réservé pour charger des composants dynamiquement
• :is="'section'+n"-is est attribut utilisé pour le composant dynamique .
• :error="errors['section'+n] - utiliser cette façon de lier les variables pour section1, section2 ...

Voici une petite démo qui fonctionne comme prévu, https://codepen.io/mkumaran/pen/VWQdor

Vue.component('section1', { 
 
    props: ['error'], 
 
    template: ` 
 
    <div> 
 
    <h2>This is section1</h2> 
 
    <span>{{error.message}}</span> 
 
    </div>` 
 
}); 
 
Vue.component('section2', { 
 
    props: ['error'], 
 
    template: ` 
 
    <div> 
 
    <h2>This is section2</h2> 
 
    <span>{{error.message}}</span> 
 
    </div>` 
 
}); 
 
Vue.component('section3', { 
 
    props: ['error'], 
 
    template: ` 
 
    <div> 
 
    <h2>This is section3</h2> 
 
    <span>{{error.message}}</span> 
 
    </div>` 
 
}); 
 
Vue.component('section4', { 
 
    props: ['error'], 
 
    template: ` 
 
    <div> 
 
    <h2>This is section4</h2> 
 
    <span>{{error.message}}</span> 
 
    </div>` 
 
}); 
 
Vue.component('section5', { 
 
    props: ['error'], 
 
    template: ` 
 
    <div> 
 
    <h2>This is section5</h2> 
 
    <span>{{error.message}}</span> 
 
    </div>` 
 
}); 
 

 
var app = new Vue({ 
 
    el: '#app', 
 
    data:{ 
 
    errors: { 
 
     section1: { 
 
     message: 'section1 error' 
 
     }, 
 
     section2: { 
 
     message: 'section2 error' 
 
     }, 
 
     
 
     section4: { 
 
     message: 'section4 error' 
 
     }, 
 
     section5: { 
 
     message: 'section5 error' 
 
     } 
 
    } 
 
    } 
 
})

span{color:red;}

<script src="https://unpkg.com/vue"></script> 
 

 
<div id="app"> 
 
    <component v-for="n in 5" :is="'section'+n" :error="errors['section'+n] || {}"></component> 
 
</div>