在vue中通过后台的数据个数自动渲染前端l列表个数（axios+vux）

1.通过axios获取后台数据。

submitForm () {

return axios({

method: 'get',

url: ' http:// 链接',

withCredentials: true

})

. then(( response) => {

return response. data

})

. catch(( error) => {

console. log( error)

})

}

2.vux的panel属性可以在html中只写一行，具体数值从js中获取数据，并通过多组数据自动渲染出多行列表。

< panel header= "标题" :list=" list" :type=" type" > panel >

3.而在demo中，script返回的数据中，具体数据仍然需要自己填充而不是后台数据获取，仍然是写死的。如下。

data () {
    return {
      type: '1',
      list: [{
        src: 'http://somedomain.somdomain/x.jpg',
        fallbackSrc: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题一',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: '/component/cell'
      }, {
        src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
        title: '标题二',
        desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
        url: {
          path: '/component/radio',
          replace: false
        },
        meta: {
          source: '来源信息',
          date: '时间',
          other: '其他信息'
        }
      }],
      footer: {
        title: this.$t('more'),
        url: 'http://vux.li'
      }
    }

为了能灵活使用获取的后台数据，数组list不能写死。因此list应该内部为空，并不必须填入属性以及数值等内容，这些都利用方法将后台数据填充进去。

data () {

return {

type: '3',

list: []

}

method中，具体如下：

submit () {

back. submitForm(). then(( response) => {

let sets = []

if ( response. data !== undefined) {

console. log( response)

for ( let i = 0; i < response. data. length; i++) {

let groupinfo = {}

groupinfo. title = response. data[ i]. name

            groupinfo. id = response . data [ i ]. id

sets [i ] = groupinfo

}

}

this. list = sets

})

}

而如果你的数组list中还需要填入一个数组时，应当里面再嵌套一个循环：

submit () {

back. submitForm(). then(( response) => {

let sets = []

if ( response. data !== undefined) {

console. log( response)

for ( let i = 0; i < response. data. length; i++) {

let groupinfo = {}

let ingroup = []

if ( response. data[ i]. powerSockets !== undefined) {

for ( let j = 0; j < response. data[ i]. total; j++) {

let obj = {}

obj. used = response. data[ i]. powerSockets[ j]. used

obj. id = response. data[ i]. powerSockets[ j]. id

ingroup[ j] = obj

}

}

groupinfo. title = response. data[ i]. name

groupinfo. items = ingroup

sets[ i] = groupinfo

}

}

this. list = sets

})

}

这样，就可以将后台数据收到的json数据填灵活的充进list之中，再利用panel渲染出多行数据。

ps:接下来我需求在上方渲染的列表中，点击不同的列表弹出的子组件弹窗中包含后台数据获取的相对应的内容（如何弹出子组件弹窗，点击这里）。

方法与上方大致相同，需要举一反三。在panel中加入@on-click-item属性，以此获取点击的列表时第几个，并且其中showModule默认有参数，参数为之前list数组中获取的json数据。

< panel header= "常用电站列表" :list=" list" :type=" type" @on-click-item=" showModule" > panel >

然后再根据上方内容新建一个数组，利用showModule将参数填充进数组中。

接下来的弹窗可以调用新建数组内部的内容，具体代码不贴出来，与上方相似。

弹窗内容填充仅写出思路，希望下次有相似的需求时能根据思路顺畅的写出来。

总结：举一反三。