鍍金池/ 問答/HTML/ vue v-for 循環(huán)里面不能調(diào)用外部data里面的字段

vue v-for 循環(huán)里面不能調(diào)用外部data里面的字段

TA卡，，循環(huán)輸出的布局一樣，只有幾個文字根據(jù)點擊的TAB卡不一樣而不一樣

我的判斷依據(jù)是根據(jù)tab卡當(dāng)前的ID值進(jìn)行判斷，如果放到循環(huán)體就取不到了。
放到外部，就要寫兩個循環(huán)了？
因為后端返回的字段都是一樣的，只是點擊購買中的循環(huán)中的文字和取值不一樣

        <div class="demo-tab">
            <ul>
                <li @click="e=>this.current_tab=0" 
                    :class="{'active':this.current_tab===0}">
                    <b>購買中</b>
                    <em></em>
                </li>
                <li @click="e=>this.current_tab=1" 
                    :class="{'active':this.current_tab===1} ">
                    <b>待發(fā)貨</b>
                    <em></em>
                </li>
                <li @click="e=>this.current_tab=2"
                    :class="{'active':this.current_tab===2}">
                    <b>已收貨</b>
                    <em></em>
                </li>
            </ul>
        </div>
        
        <div class="demo-cont">
            <div class="" v-for="(item,index) in data" :key="index">
                這里只有購買中的字段不一樣，其它兩個都一樣
            </div>
        </div>
回答
編輯回答
掛念你

可以做成一個小組件，然后傳遞isSecond的prop，來判斷是不是第二個循環(huán)
或者還可以用插槽來自定義名稱

    <div class="demo-cont">
        <ul v-for="(item,index) in data" :key="index">
            <li :class="{'active':current_tab === index}"
            @click="current_tab = index" >
                <span v-if="index === 0">{{ isSecond ? '自定義字段' : item.name}}</span>
                <span v-else>{{ item.name }}</span>
            </li>
        </ul>
    </div>

不知道是不是我理解的這個意思

2017年8月4日 01:46
編輯回答
奧特蛋

循環(huán)使用的數(shù)組用計算屬性，在計算屬性的方法中，先根據(jù)id把需要的值填充進(jìn)數(shù)組中的每個對象即可

2017年9月18日 12:27
編輯回答
過客

請把問題描述的清楚一些

2018年8月3日 23:04