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

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

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

你是不是要用动态组件,可以通过 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>

https://blog.csdn.net/fly_wugui/article/details/82693214

试试这样,

vue 循环 加上 :key 绑定数组的clmuCode,循环的item会按顺序显示

 v-for="(item,index) in data" :key="item.clmuCode"

在拿到后台数据后做一次数据处理,处理成自己想要的数据格式