首頁猿問 vue v-for循環(huán)中item值的問題

vue v-for循環(huán)中item值的問題

Vue.js

叮當(dāng)貓咪 2018-09-02 14:03:05

問題描述：我想復(fù)用一個寫好的公共組件<template> <ul> <li v-for="(item, index) in items" :key=index> <div> <h2>{{item.name}}</h2> </div> </li> </ul></template>其中兩個items的數(shù)據(jù)結(jié)構(gòu)分別如下：items1: [ { name: 'a' }, { name: 'b' }, { name: 'c' } ]items2: [ { data: { name: 'a' } }, { data: { name: 'b' } }, { data: { name: 'c' } } ]傳items1時，獲取name是：item.name，傳items2時，獲取name是：item.data.name除了數(shù)據(jù)結(jié)構(gòu)略有不同外，其他內(nèi)容一樣，所以想復(fù)用這個組件我的思路：在這個組件中寫兩個ul ，然后用一個標(biāo)識去控制顯示的是item.name 還是item.data.name，但是又覺得這種方法太笨，跟重新寫一個組件沒啥區(qū)別。請問：有遇到這種情況的人嗎，大家都是怎么解決的（不要說跟后臺商量把數(shù)據(jù)結(jié)構(gòu)改為一致。。。）

查看完整描述

2 回答

浮云間

TA貢獻(xiàn)1829條經(jīng)驗獲得超4個贊

寫一個 computed 做兼容層

computed: {
    fItem () {        if (this.item.length == 0)            return [];            
        if (this.item[0].data) {            return this.item.map((v) => v.data);
        } else {            return this.item;
        }
    }
}

然后循環(huán)：fItem 就行了

反對回復(fù) 2018-09-02