后台每次返回的数组里面的数据顺序都是不一样的,我每次渲染数组对应的
子组件顺序也是跟着变化的,请教大神们解决方法。以下是返回的数据格式,
我要根据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"
在拿到后台数据后做一次数据处理,处理成自己想要的数据格式