vue中根据后端接口数据控制按钮的显示与隐藏（手动添加响应式this.$set()）

VIP文章 已于 2022-04-19 10:16:30 修改
阅读量6.6k 收藏 5
点赞数 1
分类专栏： # vue 前端 文章标签： vue.js javascript 前端
于 2022-04-08 16:22:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44320032/article/details/124043036
版权

项目涉及到的问题，按钮需要根据后端返回的参数情况，实现按钮的显示与隐藏。

效果如图：

 1.查看后端接口

get请求，需要传businessId和compoCode两个参数，返回的data有数据就显示按钮，没数据就隐藏按钮。

2.在config.js中配置

isExistProcess: `/${version}/common/isExistProcess`,

3.准备参数

地址有了，compoCode是每个页面唯一的可直接获取，businessId是getTableData接口传过来的，所以需要先调用getTableData接口。每条数据有唯一的businessId。因为需要把数据一条条传过去（即传唯一的compoCode和唯一的businessId），而且需要在页面加载完成时就获取到所有的id（即获取不到r

最低0.47元/天 解锁文章
芝士焗红薯
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【JavaScript源代码】vue 中this.$set 动态绑定数据的案例讲解.docx
12-29
vue 中this.$set 动态绑定数据的案例讲解 　　感觉网上对this.$set的讲解乱糟糟的，我来总结一下对它单个数据、对象、数组、json数据的绑定.　　话不多说直接上代码：　　<template>　　  <div>　　    <!-- 单个数据 -->　　    <button @click="text0a">text0</button>　　    <p>text0: {{text0}}</p>　　    <!-- 对象 -->　　    <button @click="textObja">textObj</button>　　    <p>textObj.text1: {{text
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
Vue组件点击事件不触发的问题，添加事件修饰符native解决
最新发布
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
03-04 5873
相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
从vue源码解析Vue.set()和this.$set()
10-18
主要介绍了从vue源码看Vue.set()和this.$set()的相关知识,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的。感兴趣的朋友跟随小编一起看看吧
Vue.set() this.$set()引发的视图更新思考及注意事项
10-18
this.$set()和Vue.set()本质方法一样，前者可以用在methods中使用。这篇文章主要介绍了Vue.set() this.$set()引发的视图更新思考及注意事项,需要的朋友可以参考下
vue中 this.$set的用法详解
10-16
主要介绍了vue中 this.$set的用法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+element 根据状态，显示不同的操作按钮
zhouzhiwengang的专栏
04-12 6041
效果截图： VUE 核心功能代码片段 <!--列表--> <el-table :data="hrs" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;"> <el-table-column type="selection" width="55"> </el-table-column> &
vue iview table列表操作 render（根据不同状态显示不同按钮）
qq_36865945的博客
07-15 2635
今天在增加操作按钮时遇到了问题，网上找了很多方法，最后找到一个不错的解决方案，以前根据这一行的某个值判断只用了if(字段===“值”)，但是条件增加，该方法不能很好的支持业务。 话不多说上干货： 这次因为要根据 用户状态、用户角色判断，所以， render: (h, params) => { //设置值，如果为这个值，则显示这个 类似于java的三元运算符,R如果不符合条件，则显示:后面 let chart = params.row.characterName === '***' ..
Vue el-button根据条件显示与隐藏
qq_42403906的博客
10-12 9429
'none':'' }" 控制按钮是否隐藏。'冻结' : '解除冻结' }} 控制按钮显示的样式。需求是按照delete的值来判断为冻结或者解除冻结，但是有个情况是deleted=1时不显示这个按钮。
vue中将后台返回的数字转换成对应的文字
Mrs_haining的博客
02-23 3116
vue中将后台返回的数字转换成对应的文字
vue列表不同状态不同操作选项
STATICHIT静砸的博客
12-17 1000
后台管理时，最基本的一种列表就是用户列表，一般是均有修改资料和封号这样子的操作选项，而进行一些列表管理时，操作选项会根据具体内容而有所不同。解决思路是有多少种操作情况就写多少种按钮，使用vue的v-if来操作显示哪个按钮。通过 v-if指令 决定按钮的显示隐藏。我们无需对按钮进行过多的变换。
vue 根据条件设置按钮的隐藏与显示
热门推荐
且听风吟的博客
10-11 1万+
<el-button v-if="isNeedAudit" size="mini" type="warning" round plain @click="auditTask"> {{ $t('common.audit') }} </el-bu...
Vue中对获取数据、返回数据进行处理的wode总结
森姐姐的博客
12-13 5321
Vue中对获取数据、返回数据进行处理的总结
前端权限控制（三）：根据后台接口数据传递页面按钮权限-自定义指令-实现按钮级权限控制
zhufan2333的博客
08-12 2022
通过自定义指令来实现对按钮的控制：后端返回异步路由表中添加页面按钮权限字段，前端根据返回表中的权限来操作按钮。创建文件夹directives下index.js// 自定义指令BtnRole}})}}// 自定义指令，用来控制按钮权限// 当前按钮传递的值( v-BtnRole="'add'" 中的值)// 获取到存放在 store 中的权限数据// 如果不存在权限列表if (!} else {// 判断是否存在对应的按钮权限})// 不具备权限则删除（隐藏）.........
同步访问接口，实现前端闭包js，实现隐藏
安宇轩~
06-01 510
线上需要隐藏按钮，线下需要展示按钮。如何实现？
Vue中条件判断v-if与v-show
m0_71345904的博客
08-02 3497
1），v-if显示与隐藏元素是通过删除和添加节点来完成的，v-show是通过对节点进行display：none/block操作，并没有删除节点。（3），v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。（2），v-if，v-else-if，else，配合使用，一旦符合条件，不执行其他的条件。（1）v-if渲染DOM，为false时移除显示，是比较强硬的手段，直接将节点删除。（2）false时，隐藏元素，实际还在，只是不显示。....
vue 判断失效时间决定按钮的显示隐藏
weixin_46122878的博客
10-25 287
vue 判断失效时间决定按钮的显示隐藏
antd vue table中列的隐藏和显示的控制
reembarkation的博客
04-27 3146
antd vue中关于table列的展示和隐藏的具体实现
【前端】掌握按钮的显示与隐藏
山赶着山，山山漫漫结成关
06-02 1万+
在前端开发中，按钮的显示与隐藏效果是常见且重要的交互.有时候我们需要通过一些逻辑来控制按钮的显示或隐藏。下面就来介绍一些实现方式。//是否显示删除按钮通过CSS属性、JavaScript、前端框架等方法，我们可以实现按钮的显示与隐藏，提升用户界面的交互性和用户体验。根据项目需求和技术栈的不同，选择合适的方法来实现按钮的控制，使用户界面更加灵活和友好。
vue中使用this.$set报错_this15.$set is not a function
07-15
### 回答1： 在Vue中使用this.$set(obj, key, value)方法是为了在响应式地更新对象时，能够添加新的属性而不影响数据的响应式更新。但是，当报错_this15.$set is not a function时，通常有以下几个可能的原因和解决办法： 1. Vue版本较低：请确保你的Vue版本是2.3.0及以上。因为在这个版本之前，Vue中的this.$set()方法并不是默认自带的。可以通过查看Vue的版本号来确认是否符合要求。 2. this指向错误：在Vue组件中，确保你在正确的作用域内使用了this.$set()方法。如果是在组件的回调函数或者异步操作中使用，可能会导致this指向发生变化。 3. 被操作的对象不是响应式的：this.$set()只能在响应式的对象上使用，如果传入的对象不是响应式的，会导致报错。可以使用Vue.set()方法或直接在data中声明对象的方式将其转变为响应式对象。 4. Vue的实例被重写：如果在Vue实例被重写之后再使用this.$set()方法，会导致报错。在Vue实例被重写之前或在Vue组件中正常使用this.$set()方法。 综上所述，要解决_this15.$set is not a function报错，首先确保Vue版本符合要求，然后确认使用this.$set()的作用域正确并且被操作的对象是响应式的。如果问题仍未解决，可以进一步检查是否重写了Vue实例。 ### 回答2： 当在Vue中使用this.$set报错_this15.$set is not a function时，通常是因为this指向不正确或者Vue实例没有正确地初始化。 首先，确保你的Vue实例已经成功创建，并且在使用this.$set之前已经完成了初始化。一般情况下，Vue实例的初始化应该在created或mounted钩子函数中完成。 其次，检查this指向是否正确。在Vue组件中，你可以在methods中定义方法，而在方法中使用this来访问Vue实例。如果你有一个异步操作或者回调函数，并且需要在回调函数中使用this.$set，那么在回调函数中可能会丢失正确的this指向。为了确保this指向正确，你可以在异步回调函数之前将this存为一个变量。 示例代码如下： ``` export default { data() { return { message: "Hello Vue!" } }, created() { // Vue实例初始化 // 这里你可以进行一些初始化操作 }, methods: { updateMessage() { // 在回调函数之前存储正确的this指向 const self = this; // 异步操作或者回调函数 someAsyncOperation(function(response) { // 在回调函数中使用正确的this指向 self.$set(self, 'message', response.data); }); } } } ``` 通过以上方法，你应该能够成功使用this.$set来更新Vue实例中的数据，而不再遇到_this15.$set is not a function的错误。 ### 回答3： 在Vue中使用this.$set工具函数来动态修改响应式数据时，出现_this15.$set is not a function_的报错通常是因为this.$set函数的调用方式不正确或者Vue版本过低导致的。 首先，确保你正在使用的是Vue 2.x版本，因为在Vue 1.x版本中并没有this.$set这个函数。 其次，this.$set函数是用来给Vue实例添加响应式属性的，所以调用时需要传入三个参数，分别是对象本身、属性名和属性值。例如： ```javascript this.$set(this.obj, 'prop', value) ``` 其中，this.obj是你想要添加属性的对象，'prop'是属性名，value是新的属性值。 另外，如果你在自定义组件的方法中使用this.$set，需要保证this指向当前组件实例。如果方法是通过普通的函数定义，可能会导致this指向错误。为了确保this指向正确，可以使用箭头函数或者使用bind()方法来绑定this。例如： ```javascript methods: { updateProp: function(value) { this.$set(this.obj, 'prop', value) } } ``` 或者使用箭头函数： ```javascript methods: { updateProp: (value) => { this.$set(this.obj, 'prop', value) } } ``` 总结一下，要解决_this15.$set is not a function_的报错，需要确保使用的是Vue 2.x版本，并且调用this.$set函数时传入正确的参数，并且保证this指向正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芝士焗红薯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值