vue v-for循环时v-if能不能绑定data里的值

这个问题有点难以描述,我描述的详细点
1.我页面上有四个按钮,这四个按钮都是动态显示的;每个按钮上对应着独立的flag,可以控制按钮的显示

<el-button v-if="!newLx" @click="addMind('newLx')"> + 新增留学意向</el-button>
<el-button v-if="!newFl" @click="addMind('newFl')"> + 新增培训意向</el-button>
<el-button v-if="!newYm" @click="addMind('newYm')"> + 新增海外投资意向</el-button>
<el-button v-if="!newYx" @click="addMind('newYx')"> + 新增游学意向</el-button>
<script>
export default {
 data() {
        newLx: false,
        newFl: false,
        newYm: false,
        newYx: false
 },
 methods:{
  addMind(type) { // 新增意向的按钮点击,控制对应的表单显示,按钮消失
        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>

点击按钮呢,当前这个按钮就会消失
2.功能很简单,但是感觉这样不优雅,所以我想把按钮用for循环渲染出来

<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':'新增留学意向'},
{'flag':'newFl','name':'新增培训意向'},
{'flag':'newYm','name':'新增海外投资意向'},
{'flag':'newYx','name':'新增游学意向'},
]
}

但是v-if的值一直取不对,不知道怎么取,
因为我还要通过后台数据判断哪个按钮展示与否,所以我想用controlBtn里的'newLx'对应上方的newLx: false,这样回显的时候,我就直接能控制newLx: false/true,从而控制按钮的展示与否.
各位有什么优雅的办法吗

阅读 5.4k
2 个回答
<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':'+新增留学意向','show': false},
        {'flag':'newFl','name':'+新增培训意向','show': false},
        {'flag':'newYm','name':'+新增海外投资意向','show': false},
        {'flag':'newYx','name':'+新增游学意向','show': false},
    ]
},
methods:{
  addMind(item) { // 新增意向的按钮点击,控制对应的表单显示,按钮消失
      return item.show = !item.show;
    }
}

去掉 flag 的值的引号,去掉 v-if 后的加号和括号,@click 改为

@click="item.flag = !item.flag"
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题