vue v-for循環(huán)時(shí)v-if能不能綁定data里的值

這個(gè)問(wèn)題有點(diǎn)難以描述，我描述的詳細(xì)點(diǎn)
1.我頁(yè)面上有四個(gè)按鈕,這四個(gè)按鈕都是動(dòng)態(tài)顯示的；每個(gè)按鈕上對(duì)應(yīng)著獨(dú)立的flag,可以控制按鈕的顯示

<el-button v-if="!newLx" @click="addMind('newLx')"> + 新增留學(xué)意向</el-button>
<el-button v-if="!newFl" @click="addMind('newFl')"> + 新增培訓(xùn)意向</el-button>
<el-button v-if="!newYm" @click="addMind('newYm')"> + 新增海外投資意向</el-button>
<el-button v-if="!newYx" @click="addMind('newYx')"> + 新增游學(xué)意向</el-button>
<script>
export default {
 data() {
        newLx: false,
        newFl: false,
        newYm: false,
        newYx: false
 },
 methods:{
  addMind(type) { // 新增意向的按鈕點(diǎn)擊,控制對(duì)應(yīng)的表單顯示，按鈕消失
        switch (type) {
            case 'newLx':
                this.newLx = !this.newLx
                break
            case 'newFl':
                this.newFl = !this.newFl
                break
            case 'newYm':
                this.newYm = !this.newYm
                break
            case 'newYx':
                this.newYx = !this.newYx
                break
        }
        }
}
</script>

點(diǎn)擊按鈕呢，當(dāng)前這個(gè)按鈕就會(huì)消失
2.功能很簡(jiǎn)單，但是感覺(jué)這樣不優(yōu)雅，所以我想把按鈕用for循環(huán)渲染出來(lái)

<template v-for="(item,index) in controlBtn">
<el-button v-if="'+(item.flag)+'" @click="addMind(item.flag)">+ {{item.name}}</el-button>
</template>
data:{
newLx: false,
newFl: false,
newYm: false,
newYx: false,
controlBtn:[
{'flag':'newLx','name':'新增留學(xué)意向'},
{'flag':'newFl','name':'新增培訓(xùn)意向'},
{'flag':'newYm','name':'新增海外投資意向'},
{'flag':'newYx','name':'新增游學(xué)意向'},
]
}

但是v-if的值一直取不對(duì)，不知道怎么取，
因?yàn)槲疫€要通過(guò)后臺(tái)數(shù)據(jù)判斷哪個(gè)按鈕展示與否，所以我想用controlBtn里的'newLx'對(duì)應(yīng)上方的newLx: false,這樣回顯的時(shí)候，我就直接能控制newLx: false/true，從而控制按鈕的展示與否.
各位有什么優(yōu)雅的辦法嗎

回答

編輯回答

墨小羽

去掉 flag 的值的引號(hào)，去掉 v-if 后的加號(hào)和括號(hào)，@click 改為

@click="item.flag = !item.flag"

2017年3月30日 04:35

編輯回答

涼心人

<template v-for="(item,index) in controlBtn">
    <!-- 最好別直接用“+”號(hào)，用個(gè)icon圖片之類的代替一下比較好 -->
    <el-button v-if="!item.show" @click="addMind(item)">{{item.name}}</el-button>
</template>


//script
data:{
    controlBtn:[
        {'flag':'newLx','name':'+新增留學(xué)意向','show': false},
        {'flag':'newFl','name':'+新增培訓(xùn)意向','show': false},
        {'flag':'newYm','name':'+新增海外投資意向','show': false},
        {'flag':'newYx','name':'+新增游學(xué)意向','show': false},
    ]
},
methods:{
  addMind(item) { // 新增意向的按鈕點(diǎn)擊,控制對(duì)應(yīng)的表單顯示，按鈕消失
      return item.show = !item.show;
    }
}

2017年3月31日 12:50