vuejs2 - Vuejs dynamic directives v-for loop
问题描述
I have the following code, but displays text and don't instantiate the steps.
How can i achieve that?
Template:
<template>
<div>
<ul>
<li v-for="(step, index) in $store.state.steps" >
<{{`step-${index+1}`}}></{{`step-${index+1}`}}>
</li>
</ul>
</div>
</template>
Output:
<step-1></step-1>
<step-2></step-2>
<step-3></step-3>
<step-4></step-4>
<step-5></step-5>
<step-6></step-6>
<step-7></step-7>
解决方案
Read documentation here https://vuejs.org/v2/guide/components-dynamic-async.html
<component v-bind:is="currentComponent"></component>
推荐阅读
- php - 如何使用 Google_Service_Pubsub_Topics_Resource (PHP) 向 Google Pubsub 消息添加属性?
- hp-uft - SystemUtil.Run 不会执行文件
- database - 在编程或数据库中过滤表是否更快?
- android - 如何通过 httpurlconnection 发送图像
- flutter - 单击 TextFormField 后容器装饰消失
- javascript - 如何使用 javascript 使我的图像地图具有响应性
- reactjs - 在 useEffect 之外设置未安装组件的状态
- android - BluetoothGatt: onClientRegistered() - status=133 // onConnectionStateChange 状态:257
- python - 获取运行 askopenfilename 的按钮的结果
- sql - 如何在 SQL Server 中获得前 50 个国家/地区并将其余国家/地区分组给其他国家/地区