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,从而控制按钮的展示与否.
各位有什么优雅的办法吗
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
去掉 flag 的值的引号,去掉 v-if 后的加号和括号,@click 改为