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
10 个月之前 回复
jslang
天际的海浪 回复weixin_42082342: 我的回答已更新
10 个月之前 回复
weixin_42082342
远方有止 这个只是控制子组件是否显示吧,改变不了子组件的顺序,,
10 个月之前 回复
0
weixin_42082342
远方有止 这个我试了一下,发现改变不了子组件出现的顺序呀,还是我的思路不对?
10 个月之前 回复

试试这样,

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

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

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

0
weixin_42082342
远方有止 那也改变不了DOM的结构吧,产品经理要求根据返回的数组顺序,动态改变DOM的结构~(笑哭)
10 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue遍历,并按照数组中的某个对象的值进行排序
见链接:https://blog.csdn.net/qq_42229253/article/details/81268055
vue 做后台管理系统2维数组表单(动态渲染可编辑单元格的Table)
先上效果图: 说明: 横 和 纵 都是遍历出来的 从数据库取出来的 input 是一个个填的 最下面有一个提交保存的按钮 跟这个表格很类似: 一、问题是这样的:后台传了xArr = [x1, x2,...,xn]和yArr = [y1, y2, ..yn]两个数组,前端要渲染出表格并且可以填写每个单元格的值,然后按照一定数据结构保存...
vue中当传入一个组件的数据类型为对象或数组时,当不传入该值的报错问题
这是我自定义的TableColumn.vue组件代码: &lt;template&gt; &lt;el-table-column :prop="prop" :label="label"&gt; &lt;template slot-scope="scope"&gt; &lt;el-select v-model="scope.row[prop]" v-if="t...
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的加载顺序探讨(一)
在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 props传递数组子组件获取不到
1. 问题描述 在子组件定义了srcList props:{ width:Number, height:Number, name:String, size:String, srcList:Array, multiple:Boolean }...
vue+element实现动态:根据后台返回的属性名和字段动态生成可变表格
vue+element实现动态:根据后台返回的属性名和字段动态生成可变表格element表格使用插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式 由于项目需求,现在要实现表格的动态生成,也就是,表格的头部属性要可以动态改变,从后台获取数据来控制表格有几列属性,并...
vue从父组件中获取数组,子组件input循环,绑定v-model的方法
通过绑定key值,如,searchConditionsData是父组件传递过来的数组, searchConditions: [ {             name: '名称',             type: 'text',             model: 'eq-name',           },] 子组件绑定自身组件的model,通过condition.key      ...
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组件初始化顺序
很有用的~ inject、props、methods、 data、 computed、 watch、
VUE项目,从mongodb后台获取的对象数组,前端对其进行排序
methods: {     //升序排序,js中方法     sortRole (pro) {         return function (a,b) {             var value1 = a[pro];             var value2 = b[pro];             return value1 - value2;          }...
Vue实例化和组件的注册顺序
var list=Vue.extend({//组件 template:'#list', data:function(){ return {items:[]}; }, methods:{ getList:function(){ this.$http({ url:"http://localhost:8080/getList", method:'POST', }).then(func
vue关于时间顺序排序
在使用后台传来的数据或者
通过数组循环渲染(生成)组件
import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { View, Image, StyleSheet, TouchableOpacity, Alert, Text } from 'react-native'; import Size from '../C...
从后台获取的字符串分割成数组
var content = &quot;1、每台押金58元,激活一台返现200元;#2、分润分成万分之四,即商户每刷卡交易一万元,会得分润4元;#3、活动期间,对您未推广出去的机具,我们承若全额回收,退换全额押金。&quot; array = content.split('#'); console.log(array); 结果:[&quot;1、每台押金58元,激活一台返现200元;&quot;, &quot;2、分润分成万分之四,即商户每刷卡交...
vue父子组件的数据传递
1.父组件向子组件传递数据<div id="box"> <aaa></aaa> </div><template id="aaa"> <h1>模板aaa=>{{msg1}}</h1> //msg1写在这里是可以的,因为这是父组件内部 //<bbb>{{msg1}}</bbb> //这种写法是不可以的,这是在子组件内部,要在这里显示父组件的数
vue 关于双向绑定的坑之一数组无顺序插入
使用场景:异步获取数据,向数组内无顺序插入数据,通过双向绑定刷新组件或显示组件 getList () { let that = this getCardsList('01').then((r) =&amp;gt; { if (r.response !== &quot;error&quot;) { // this.otherData = r...
【阿里前端测评题】实现 mergePromise 函数,把传进去的数组顺序先后执行,并且把返回的数据先后放到数组(data)中
const timeout = ms =&amp;gt; new Promise((resolve) =&amp;gt; { setTimeout(() =&amp;gt; { resolve(); }, ms) }); const ajax1 = () =&amp;gt; timeout(1000).then(() =&amp;gt; { console.log('1') ret...
vue向后台传数组时,被转换成了对象,另一种处理思路
前两天项目上遇到需要往后台list的场景,当每一项是id的单个值的时候,我们可以用分割符号(例如逗号","),然后把拼接的list字符串("1,2,3,4,5,6...")传到后台来处理,然后处理自己的业务逻辑,当需要往后台传一个对象的数组的时候,我们就需要利用js的let JSON.stringify(arr)方法来转换数组成字符串,然后后台利用JSON.parseArray(arr,Claz...
vue组件之间数据的传递 - 父传子详解
简单一点, 把根组件作为父组件。1.1.1. 父子之间不能正常共享数据的  1.1.2. 父组件把数据传递给子组件: 步骤步骤:1.1.2.1. 在父组件中,正常定义自己的数据。  1.1.2.2. 在父组件的模板中通过属性绑定把数据绑定到子组件上。1.1.2.3. 在子组件中定义props属性。用来接收父组件传递的数据。 在props中定义的属性,是专门用来从父组件中去获取数据的,定义好了之,就...
vue使用子组件试图改变 prop 的情形
(1)这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值: props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } (2)这个 p...
vue props传Array/Object类型值,子组件报错解决办法
当在父组件通过props传Array/Object类型值给子组件的时候,如果子组件的props接收default为 exampleData:{ type:Array, default:[] }时,系统会报错Invalid default value for prop &amp;quot;slides&amp;quot;: Props with type Object/Array must use a fact...
判断后台返回的空数组
  今天对接口的时候遇到一个问题,就是后台返回的数据是一个空数组,但是我项目中的表格还是之前的数据,于是想到了判断这个空数组。 判断空数组的方法稍微复杂点,不过孰能生巧 方法一: 判断长度 if(res.data.data.length &amp;lt;=0 ){ console.log('我是空数组'); ... }   方法二: JSON.stringify(obj) ===...
vue组件data为数组或对象发生改变时不能被监听解决方案
问题描述: 父组件: data() { return { box : [ {'symbol':'', 'type':'a', 'use':false}, {'symbol':'', 'type':'b', 'use':fals...
记录vue绑定class和style出现先后顺序问题
近期做项目,发现一个新的问题,废话不多说,直接上代码` &lt;div&gt; &lt;span&gt;手机号:&lt;/span&gt;&lt;input type="text" @keyup="phoneVersify" name="phone" v-model="phoneVersifyData" @blur="phoneVersify...
EXTJS2--grid通过后台返回数据动态生成表头和列表
1.需要引入Ext.ux.data.PagingMemoryProxy.js Ext.namespace("Ext.ux"); Ext.namespace("Ext.ux.data"); /* Fix for Opera, which does not seem to include the map function on Array's */ if(!Array.prototype.map){...
Vue 生命周期以及子组件和父组件生命周期发生的先后顺序
从没有认真想过Vue组件的生命周期,以为所有的都是按那个顺序发生和执行的,直到今天在完成某一个业务时,才认真去思考组件的生命周期、子组件与父组件创建和挂载的时间点。 VUE组件的生命周期 子组件与父组件生命周期发生的先后顺序...
vue子组件向父组件传值----$emit
子组件向父组件传值可以使用  $emit()   我的理解是子组件通过$emit方法把自己的第一个参数eventName传递给父级,父级把eventName当成一个事件,触发这个事件接收子级传给自己的数据或执行操作 $emit ( eventName,args..) 参数eventName(必传参数): 传递到父级的时间名 参数args(可选参数): 传递到父级数据(可以传字符串、数组、对...
vue 父组件需要子组件返回的值作为请求参数
实现该功能,思路就是:子组件请求完成的时候 $emit, 父组件触发事件请求数据。 //子组件 export default{ mounted: function() { this.$axios({ method: 'get', url: Constants.HOME_URL + '/dealer/' ...
前端对后台传过来是数组进行重新排序显示
var result = $.util.requestAjaxData('/admin/portal/listActivities.do'); result 为后台查询出来的数组数据 result.sort(getSortFun('asc','aiId')) 我在前台对数据进行根据id排序 function getSortFun(order, sortBy) { var
Vue自定义组件中Props中接收数组或对象
自定义弹框组件时,需要在弹框内展示商品list,所以需要组件中的对应字段接收一个Array数组,默认返回空数组[],直接定义空数组报错,如下所示。 props: { content: { type: Array, default: [] }, } 报错信息 [Vue warn]: Invalid default value for prop &amp;quot;con...
解决vue更新对象数组时,视图不更新以及更新错误问题
最近因为工作需求原因一直使用VUE框架,作为时下最热门的**渐进式框架**,开发起来确实非常给力~ 当然一个好的工具也不可能完全对你百依百顺,最近在工作中就遇到了一个问题,经过一下午的奋战终于搞定了,秉承着本熊一贯的无私奉献的原则,也为了向诸位同行一同探讨,特地临时搭了一个架子来演示解决过程,如果有更好方式欢迎指正: 大致需求是这样的: 当我点击类型下拉框时,要同步更新这行的数据: 嗯...
将数组按照拼音排序,并按字母排序
按拼音排序:var resultArray = arr.sort( //数组按照abcd排列 function compareFunction(param1, param2) { return param1.localeCompare(param2,&quot;zh&quot;); } );将数组按照拼音排序(多...
Vue+Element ui 根据后台返回数据设置动态表头
&amp;amp;amp;amp;amp;amp;lt;el-table class=&amp;amp;amp;amp;amp;quot;tb-edit&amp;amp;amp;amp;amp;quot; highlight-current-row :data=&amp;amp;amp;amp;amp;quot;table_orderStatistic&amp;amp;amp;amp;amp;quot; border style=&amp;amp;amp;amp;amp;quot;width: 100
vue数据渲染先后顺序问题
我在编辑页面实现数据渲染的时候,在netWork里面看到所有数据都已经从后台取到了,但是该页面中的表单数据包括普通的input框、radio和CheckBox多选框,其他数据都顺利渲染出来,只有多选框里面的数据没有回显,就是因为渲染顺序问题。 该页面中的数据和CheckBox里面的数据是同时请求了接口,因此CheckBox在渲染的时候,由于是同步进行,还没有取到相应的数据,因此会出现没有正确回显...
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() { ...
vue父组件向子组件传递多个数据
在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况:第一种:静态数据传递:传递一个 字符串 第二种:动态数据传递:绑定一个字符串传过去,一个数组,或者是一个对象传递过去这里主要看一下动态的数据绑定。比如你可以将你所有需要的数据都封装在一个数组,或者是一个对象里面然后 传递给子组件。但是有一个问题,假如你有两个数据,一个对象
vue项目构建——父子组件中调用方法的执行顺序
需求场景: 使用vue-cli创建的项目,父组件LeftMainmenu.vue里通过&amp;lt;router-view&amp;gt;加载了子组件,父组件与子组件的methods里各自有方法,初始化的时候在mounted里进行了调用。预设的想法是想在父组件LeftMainmenu.vue的方法里把axios请求到的数据设置成缓存【以下用localdata替代】,然后子组件调用的方法去使用localdata...