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

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 kali环境运行volatility分析android内存文件，缺profile
  • ¥15 写uniapp时遇到的问题
  • ¥15 vs 2008 安装遇到问题
  • ¥15 matlab有限元法求解梁带有若干弹簧质量系统的固有频率
  • ¥15 找一个网络防御专家，外包的
  • ¥100 能不能让两张不同的图片md5值一样，（有尝）
  • ¥15 informer代码训练自己的数据集，改参数怎么改
  • ¥15 请看一下，学校实验要求，我需要具体代码
  • ¥50 pc微信3.6.0.18不能登陆 有偿解决问题
  • ¥20 MATLAB绘制两隐函数曲面的交线