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

這個問題有點難以描述，我描述的詳細(xì)點
1.我頁面上有四個按鈕,這四個按鈕都是動態(tài)顯示的；每個按鈕上對應(yīng)著獨立的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) { // 新增意向的按鈕點擊,控制對應(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>

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

<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的值一直取不對，不知道怎么取，
因為我還要通過后臺數(shù)據(jù)判斷哪個按鈕展示與否，所以我想用controlBtn里的'newLx'對應(yīng)上方的newLx: false,這樣回顯的時候，我就直接能控制newLx: false/true，從而控制按鈕的展示與否.
各位有什么優(yōu)雅的辦法嗎

回答

編輯回答

墨小羽

去掉 flag 的值的引號，去掉 v-if 后的加號和括號，@click 改為

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

2017年3月30日 04:35

編輯回答

涼心人

<template v-for="(item,index) in controlBtn">
    <!-- 最好別直接用“+”號，用個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) { // 新增意向的按鈕點擊,控制對應(yīng)的表單顯示，按鈕消失
      return item.show = !item.show;
    }
}

2017年3月31日 12:50