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

发布于 2022-09-07 08:01:16 字数 1810 浏览 25 评论 0

这个问题有点难以描述,我描述的详细点
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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

逆流 2022-09-14 08:01:16
<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;
    }
}
南风几经秋 2022-09-14 08:01:16

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

@click="item.flag = !item.flag"
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文