Promise-proto 2018-10-24 14:33 采纳率: 100%
浏览 4251
已结题

vue技术问题。后台返回一个数组，根据数组的顺序，动态显示子组件的先后顺序，请问怎么解决？

后台每次返回的数组里面的数据顺序都是不一样的，我每次渲染数组对应的
子组件顺序也是跟着变化的，请教大神们解决方法。以下是返回的数据格式，
我要根据clmuCode字段的不同值，显示不同的表单组件，如果值 123在前面，
那么对应123的表单就显示前面，而456在后面；如果456在前面，那么对应456的表单就显示在前面，而123在后面。

            {
                "errcode": 0,
                "data": [
                        {
                                "clmuCode": "123",
                                "formContext": "{\"form1\":\"111\"}",
                        },
                        {
                                "clmuCode": "456",
                                "formContext": "{\"form1\":\"111\"}",
                        }
                ]
            }
  • 写回答

4条回答

  • 天际的海浪 2018-10-24 16:03
    关注

    你是不是要用动态组件，可以通过 Vue 的 元素加一个特殊的 is 特性来实现：

    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <component  v-for="obj in arr" :is="obj.clmuCode" :text="obj.formContext"></component>
</div>
<script type="text/javascript">
Vue.component('com-a', {
    props: ['text'],
    template: '<div><h2>子组件a</h2>{{text}}</div>'
});
Vue.component('com-b', {
    props: ['text'],
    template: '<div><h2>子组件b</h2>{{text}}</div>'
});

var vm = new Vue({
    el: '#app',
    data: {
        arr: [
            {"clmuCode": "com-b", "formContext": "asd"},
            {"clmuCode": "com-a", "formContext": "fgh"}
        ]
    }
});
</script>

</body>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器