VueJS循环通过递增组件名称前缀

Question

我有一个VueJS应用程序是一个多步骤的形式，表单的每一步都是一个新的组件，因为它们每个都包含不同的逻辑，视图，脚本和样式。

我有一个名为组件，section1，section2，section3等。从父传递的数据，applicationForm成分仍然是一个类似的风格，:errors="errors.section1" :warnings="warnings.section1" :form-data-"formData.section1"

我的想法是，而不是重复代码，并改变数值节号每一次，如果我可以把它放到一个for loop，使它更容易管理。所以下面的：

<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> 

转化为像（我不知道但正确的做法）：

<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> 

这可能吗？或者由于如何使用data对象，它不是？

Answer 1

您可以使用保留的<component>元素和:is属性来完成此操作。

了解更多关于Dynamic Component

你需要做的这种方式，

<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>是保留组件元素加载组件动态
• :is="'section'+n" - is用于动态组件属性。
• :error="errors['section'+n] - 用这种方式来绑定变量section1，section2 ...

这里有一个小的演示预期其工作， 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>