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

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

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

4个回答

你是不是要用动态组件,可以通过 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>
0
weixin_42082342
远方有止 回复jslang: 不好意思,需求我让产品改了,而且最近赶着上线,很忙,暂时没有时间测试你这个方法,等我有时间了,再验证。sorry
8 个月之前 回复
jslang
天际的海浪 回复weixin_42082342: 我的回答已更新
8 个月之前 回复
weixin_42082342
远方有止 这个只是控制子组件是否显示吧,改变不了子组件的顺序,,
8 个月之前 回复
0
weixin_42082342
远方有止 这个我试了一下,发现改变不了子组件出现的顺序呀,还是我的思路不对?
8 个月之前 回复

试试这样,

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

 v-for="(item,index) in data" :key="item.clmuCode"
0
weixin_42082342
远方有止 这个也达不到我想要的效果,感谢回答。
8 个月之前 回复

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

0
weixin_42082342
远方有止 那也改变不了DOM的结构吧,产品经理要求根据返回的数组顺序,动态改变DOM的结构~(笑哭)
8 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue数据渲染先后顺序问题
我在编辑页面实现数据渲染的时候,在netWork里面看到所有数据都已经从后台取到了,但是该页面中的表单数据包括普通的input框、radio和CheckBox多选框,其他数据都顺利渲染出来,只有多选框里面的数据没有回显,就是因为渲染顺序问题。 该页面中的数据和CheckBox里面的数据是同时请求了接口,因此CheckBox在渲染的时候,由于是同步进行,还没有取到相应的数据,因此会出现没有正确回显...
vue.js中关于$emit(eventName, optionalPayload) 触发事件的应用,子组件向父组件传递数据(字符串,数组,或者对象等)
一、父组件及代码解释:&amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;p v-for=&quot;msg in messages&quot;&amp;gt;{{msg}}&amp;lt;/p&amp;gt; &amp;lt;!--输出子组件传给父组件的数据--&amp;gt; &amp;lt;my-button4 @onclick=&quot;increment&quot;&amp;gt;&amp;lt
vue props传递数组子组件获取不到
1. 问题描述 在子组件定义了srcList props:{ width:Number, height:Number, name:String, size:String, srcList:Array, multiple:Boolean }...
Vue的加载顺序探讨(一)
在Vuejs 1.0版本中,如果父子组件进行配合,它们的生命周期执行具有如下特点:1. created总是先父后子生命周期函数created总是按照从父到子的顺序依次执行,但是兄弟之间没有严格按照这样的顺序执行,估计是采用了异步函数,不仅如此,子组件在父组件中的插入顺序也是随机的,并没有什么特别的规律。假定子组件的引用顺序如下
记如何解决vue父组件改变不了子组件props传过来的数组
父组件:(组件内容写个大概)&amp;lt;template&amp;gt; &amp;lt;div class=&quot;feedback&quot;&amp;gt; &amp;lt;comment-item :commentList=&quot;commenList&quot;&amp;gt;&amp;lt;/comment-list&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;/template&amp;gt; &amp;lt;script&amp;g
Vue中数组数据的更新问题
昨天在做vue项目的列表中描述字段的显示更多的功能时,对每一个列表项绑定了与显示更多功能有关的属性,因此用到了数组,并且使用computed进行赋值。 这时出现一个问题,直接修改数组指定位置的值,视图上并不会更新。 参考了网上的部分解决方案以及官方文档之后 vue文档中的数组更新检测,终于实现了自己想要的效果 &amp;lt;div class=&quot;content&quot; :class=&quot;{'has-...
VUE项目,从mongodb后台获取的对象数组,前端对其进行排序
methods: {     //升序排序,js中方法     sortRole (pro) {         return function (a,b) {             var value1 = a[pro];             var value2 = b[pro];             return value1 - value2;          }...
debug过程中对加载顺序、对象属性、Vue数据传递和计算属性等问题的总结
异步加载 JavaScrip 脚本放在&amp;amp;amp;lt;head&amp;amp;amp;gt;内:文档页面加载之前装载(不执行代码, 需调用才执行或事件触发执行)。 脚本放在&amp;amp;amp;lt;body&amp;amp;amp;gt;内:当页面被加载时执行,用来动态生成页面的一些内容。 增加延迟脚本defer属性 ** – 只适用外部脚本文件 – 立即下载,但延迟执行,&amp;amp;amp;lt;/html&amp;amp;amp;gt;标签之后执行 – 多个
vue关于时间顺序排序
在使用后台传来的数据或者
在 vue 中 prop 中传递一个数组时子组件不更新的问题
组件的功能是这样子的,需要根据一个二维数据循环渲染出多个 多选select。封装了 select 组件后,由于是多选,select 组件传入的 prop value 是一个数组。项目里使用到了 vuex,遇到的问题是在 mutation 中更新数组时直接给对应的 index 赋值是不行的,在最开始我是这样子用的。 [mutationTypes.UPDATE...
vue向后台传数组时,被转换成了对象,另一种处理思路
前两天项目上遇到需要往后台list的场景,当每一项是id的单个值的时候,我们可以用分割符号(例如逗号","),然后把拼接的list字符串("1,2,3,4,5,6...")传到后台来处理,然后处理自己的业务逻辑,当需要往后台传一个对象的数组的时候,我们就需要利用js的let JSON.stringify(arr)方法来转换数组成字符串,然后后台利用JSON.parseArray(arr,Claz...
前端对后台传过来是数组进行重新排序显示
var result = $.util.requestAjaxData('/admin/portal/listActivities.do'); result 为后台查询出来的数组数据 result.sort(getSortFun('asc','aiId')) 我在前台对数据进行根据id排序 function getSortFun(order, sortBy) { var
vue父组件向子组件传递多个数据
在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况:第一种:静态数据传递:传递一个 字符串 第二种:动态数据传递:绑定一个字符串传过去,一个数组,或者是一个对象传递过去这里主要看一下动态的数据绑定。比如你可以将你所有需要的数据都封装在一个数组,或者是一个对象里面然后 传递给子组件。但是有一个问题,假如你有两个数据,一个对象
Vue父子组件生命周期执行顺序及钩子函数的个人理解
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会。 1、vue的生命周期图   在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作...
VUE同一个组件内,多重数据嵌套,子循环取到父循环的ID值
VUE同一个组件内,多重数据嵌套,子循环取到父循环的ID值 VUE同一个组件内,多重数据嵌套,子循环取到父循环的ID值 在开发中碰到的问题, 赶紧记下来,记性没的说。。。。。 在开发中 常常碰到同一个组件内, 获取数据嵌套获取的。 直接上代码, 现在是父组件请求,套用子组件请求, 当父组件请求完成之后,返回的都是Promise对象,使用循环 ,将父组件返回的Promise对象存到一个新的数组中...
vue从父组件中获取数组,子组件input循环,绑定v-model的方法
通过绑定key值,如,searchConditionsData是父组件传递过来的数组, searchConditions: [ {             name: '名称',             type: 'text',             model: 'eq-name',           },] 子组件绑定自身组件的model,通过condition.key      ...
Vue自定义组件中Props中接收数组或对象
自定义弹框组件时,需要在弹框内展示商品list,所以需要组件中的对应字段接收一个Array数组,默认返回空数组[],直接定义空数组报错,如下所示。 props: { content: { type: Array, default: [] }, } 报错信息 [Vue warn]: Invalid default value for prop &amp;quot;con...
vue 做后台管理系统2维数组表单(动态渲染可编辑单元格的Table)
先上效果图: 说明: 横 和 纵 都是遍历出来的 从数据库取出来的 input 是一个个填的 最下面有一个提交保存的按钮 跟这个表格很类似: 一、问题是这样的:后台传了xArr = [x1, x2,...,xn]和yArr = [y1, y2, ..yn]两个数组,前端要渲染出表格并且可以填写每个单元格的值,然后按照一定数据结构保存...
vue父子组件的数据传递
1.父组件向子组件传递数据<div id="box"> <aaa></aaa> </div><template id="aaa"> <h1>模板aaa=>{{msg1}}</h1> //msg1写在这里是可以的,因为这是父组件内部 //<bbb>{{msg1}}</bbb> //这种写法是不可以的,这是在子组件内部,要在这里显示父组件的数
vue中通过方法返回data中的对象是这个{__ob__: Observer}
  __ob__: Observer这些数据是vue这个框架对数据设置的监控器,一般都是不可枚举的。 console.log这样的打印函数,被打印的变量会执行自身的toString(),这样,即便内部属性是不可枚举,实际上也能看到。 操作数据的过程中不要删除这些属性: 因为你已经将数据绑定在了vue之中,vue就肯定要为数据添加监控器的,如果你强制删掉了这些监控器,那么这些数据也就失去了监...
vue 关于双向绑定的坑之一数组无顺序插入
使用场景:异步获取数据,向数组内无顺序插入数据,通过双向绑定刷新组件或显示组件 getList () { let that = this getCardsList('01').then((r) =&amp;gt; { if (r.response !== &quot;error&quot;) { // this.otherData = r...
VUE组件初始化顺序
很有用的~ inject、props、methods、 data、 computed、 watch、
vue里面三方组件执行顺序方法(在主组件中点击子组件,执行调用出功能组件)
1.组件a (主组件显示页面) 代码如下:(html运用了jade模板方式) .boxes Message(:data='messdata') div(slot='content').set.nodrag .leftnav ul li(v-for='(item,index) in setlis...
Promise的顺序执行
0x00有时候我们希望JS脚本以同步的方式执行,但是在实际情况中,很多操作是异步的,如Ajax请求后端数据,执行一些动画等。刚开始,我使用回调函数的方法,这种方式的缺点很明显,当逻辑复杂时,回调函数嵌套多层,造成callback hell$.get('http://www.a.com',function (data) { //deal data $.get('http://http:
vue 父子组件声明周期的执行顺序
App.vue文件,根目录 created() { console.log('APP created') }, mounted() { console.log('APP mounted') }, MyRepayment 文件,父组件 created() { console.log('父组件 created') }, mounted() { ...
从后台获取的字符串分割成数组
var content = &quot;1、每台押金58元,激活一台返现200元;#2、分润分成万分之四,即商户每刷卡交易一万元,会得分润4元;#3、活动期间,对您未推广出去的机具,我们承若全额回收,退换全额押金。&quot; array = content.split('#'); console.log(array); 结果:[&quot;1、每台押金58元,激活一台返现200元;&quot;, &quot;2、分润分成万分之四,即商户每刷卡交...
判断后台返回的空数组
  今天对接口的时候遇到一个问题,就是后台返回的数据是一个空数组,但是我项目中的表格还是之前的数据,于是想到了判断这个空数组。 判断空数组的方法稍微复杂点,不过孰能生巧 方法一: 判断长度 if(res.data.data.length &amp;lt;=0 ){ console.log('我是空数组'); ... }   方法二: JSON.stringify(obj) ===...
Vue.js学习(四):父子组件中的生命周期与钩子函数的调用顺序
借用下面这张图先简单了解Vue的整个生命周期 increase {{msg}} destroy 一、创建与挂载(created  and mounted) 当一个父组件中加载一个子组件,且父组件和子组件中同时调用mixin函数时,整个生命周期的顺序为: 1、创建父组件 beforeCreate:父组件中的mixins--父组件
通过数组循环渲染(生成)组件
import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { View, Image, StyleSheet, TouchableOpacity, Alert, Text } from 'react-native'; import Size from '../C...
前端vue从后台取到数据(数组对象)后遍历给对象添加属性,修改这个属性为什么没有用?
场景: 带有数据监听的框架都可,我是vue 从后台获取数组对象,想给对象添加只在前端用得上的属性如item_checked: false 代码 axios.get(url).then(response=&gt;{ if(response.status === 200){ this.list = response.data this.list.forEach(el=&gt;{ ...
Vue props用法详解,父子组件传值
  组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件;子组件通过 events 给父组件发送消息。 父子级组件 比如我们需要创建两个组件 parent 和 child。需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性。 这里我们先定...
vue--同步父子组件和异步父子组件的生命周期顺序
关于vue组件的引入方式有两种 一、 同步引入 例子: import Page from '@/components/page' 二、异步引入 例子:const Page = () =&amp;amp;gt; import('@/components/page') 或者: const Page = resolve =&amp;amp;gt; require(['@/components/page'], page) 两种引入方...
vue中的列表(数组)渲染例子
vue中的列表(数组)渲染例子 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;vue中的列表渲染&amp;lt;/title&amp;gt; &amp;lt;script src=&quot;./vue.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;/head&
VUE快速入门新的——组件之间传递数据(1. Prop)
晚上好大家,组件我们在上边文章中已经说过了,对大家还是有点帮助的应该。哈哈~~ 今天我们说一下关于组件之间数据是怎样传递的?不难看出,其实组件之间的数据通信,简单的可以分为三类。 父组件向子组件传递 子组件向父组件传递 平级之间的组件数据传递 之前也有说到,父组件可以通过props向下传递数据给子组件,子组件可以通过events向上给父组件传递数据,下面我们就来详细的看一下。 我们一步步来看Pro
Vue中对拿到的数据进行A-Z排序
最近在做一个音乐app练手项目,拿到的数据是杂乱的,又不想跟视频那样重新构造数据,就自己百度使用简便的方法排序,下面说一下我拿到的数据是这样的,我想让他按照A-Z顺序排列1.对于数组的操作,官网有例子,在这里我们根据官网使用计算属性来重新排列。computed:{ sortList(){ return this.singers.sort((a, b) =&amp;gt; { ...
如果后台传的数据一个数组里面还有数组
比如data:[{&quot;name&quot;:'kk',              &quot;age&quot;:20,            &quot;interest&quot;:[{id:0,&quot;name&quot;:跳舞,},{id:2,&quot;name&quot;:唱歌}]         }]展示的结果是名字:kk,年龄20,兴趣爱好:跳舞唱歌 var ht='&amp;lt;div&amp;gt;姓名:'+data.name+'&amp;lt;/div&amp;gt;&a
vue学习(三):父组件向子组件传参
既然是组件化开发,当然少不了数据传递,我们先看看官网上写的。 使用props传递参数,试一下,还是用我们之前的项目结构 一、静态传递 1.main_header.vue {{msg}} export default { name: 'main_header', props: ['msg'] // 声明传递过来的数据msg } 2.App.v
vue组件data为数组或对象发生改变时不能被监听解决方案
问题描述: 父组件: data() { return { box : [ {'symbol':'', 'type':'a', 'use':false}, {'symbol':'', 'type':'b', 'use':fals...
vue 根据数组中某一项的值进行排序
一、前言 我在vue项目中遇到了一个表格排序的需求,根据某一项的值的大小从大到小调整数组顺序。 二、代码 表格大概是这个样子,样式和图片在代码中简化了。 &amp;amp;amp;lt;table class=&amp;quot;recommend_table&amp;quot; cellspacing=&amp;quot;0&amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;tr&amp;amp;amp;gt; &amp;amp
VUE中父子组件传参(简单明了)
· 父组件向子组件传递参数 child.vue如下 &amp;lt;template&amp;gt; &amp;lt;div class=&quot;childClass&quot;&amp;gt; &amp;lt;h3&amp;gt;子组件内容&amp;lt;/h3&amp;gt; &amp;lt;p :class=&quot;num==6?redclass:blueclass&quot;&amp;gt;当父组件内容传递给子组件时,该行变成红色&amp;
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 java数组怎么学习 java数组应该怎么学习

相似问题

4
vue技术问题。后台返回一个数组,根据数组的顺序,动态显示子组件的先后顺序,请问怎么解决?
2
如何将一张表格以一个id存入mangoDB中?
1
vue cli 3.0 文件压缩如何去掉console.log?
4
vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空白
1
vue部署上线请求高德api访问不了
1
vue在写webApp时可不可以用vue-socket.io实现长链接,实现实时刷新数据???急啊。。。。
0
[vue-i18n] Value of key 'el.datepicker.weeks.sun' is not a string! 怎样解决这个问题?
1
自己用webpack构建vue项目报错,求帮助万分感谢
1
vue自定义组件中报错,提示not defined
2
vue import jquery $.ajax 为 undefind
0
在 vue cli 中一个 js文件1 引用 js文件2的问题,报错:未定义
1
请问一下各位大佬如何整合express和d2admin呀
3
Vue从一个页面跳转到一个页面 在返回,第一个页面的js无法使用了,这是为什么 求大神指教
1
Vue初学者问题:webstorm里js报错
4
问一个vue项目中经常会出现的语法
0
vue,想建设一个公众号的意见反馈页面,主要想实现文字的发送与图片的发送
2
问一个vue项目中常出现的语法
2
vue打包后iphone 5c ios10.3.3打开报错,调试时无错误. 求解决办法
2
vue 改变一个地方, 其他地方自动渲染改变,该如何实现呢?
1
使用elementui上传文件,我怎么在预览后,点击上传时判断文件是否在本地被删除?