vue-this对象问题1（不知道还要碰到多少）

最新推荐文章于 2024-02-20 00:46:37 发布
最新推荐文章于 2024-02-20 00:46:37 发布
阅读量410 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： nuxt 文章标签： vue-this对象问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/PAss_kun/article/details/89847570
博主在使用Nuxt写毕设网站时，遇到get方法未定义的问题。经定位，发现是self对象问题，推测是在show()方法里调用cD()方法导致this对象改变，最终确定是方法调用问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

写毕设时，用nuxt写网站时，碰到get方法未定义

在这里插入图片描述
这样，实在摸不着头脑
定位到错误代码的地方
在这里插入图片描述

后来发现是self对象问题


我是在show()方法里面调用cD()方法，猜想可能是因为这个导致this对象发生了改变
show里面的this

cD里面的this

完全不一样，摸不着头脑

发现是方法调用问题，应该这么调在这里插入图片描述

vue-seamless-scroll 从入坑到放弃
weixin_43992867的博客
01-03 2万+
vue-seamless-scroll从入坑到放弃一、vue-seamless-scroll是什么？二、使用步骤1.引入库2.具体使用三、下面就是我的踩坑之路1.vue-seamless-scroll中的事件丢失问题2. 解决事件丢失问题3.vue-seamless-scroll 中异步数据的问题4.数据时有时无解决vue-seamless-scroll 源码理解如何改变文本的样式插入链接与图片创建一个表格设定内容居中、居左、居右SmartyPants参考质料 一、vue-seamless-scroll是什
【vue-router源码】三、理解Vue-router中的Matcher
MAXLZ的博客
06-06 2698
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该篇文章将带你理解vue-router的matcher。
基于vue.js中事件修饰符.self的用法(详解)
10-18
下面小编就为大家分享一篇基于vue.js中事件修饰符.self的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue的this
茅坤宝骏氹的博客
07-16 1129
一、vue编译模块 （1）模块域中导出对象域 export default { data() { return { msg: '' }; } }; A.function定义函数 I、模块导出对象的各关键字的属性值 如data的值 export default { props:['propA'}, ...
vue3获取this对象
qq_60976312的博客
11-28 1万+
vue3获取this对象
(vue.js)vue中引用了别的组件 ，如何使this指向Vue对象
weixin_30241919的博客
11-07 740
Vue中引用了别的组件 ，如何使this指向Vue对象 今天学习Vue组件传值,通过创建Vue实例, 广播和监听实现传值, 但是传值之后无法直接将得到的值应用到Vue对象, 因为这相当于引用改了别的组件, this指向发生改变,所以通过以下办法解决。 var _this = {} export default { data(){ ret...
vue异步请求_self = this
迪迦奥特曼的博客
01-06 1006
let _self = this; 解决多个请求嵌套的问题！！！！！ 之前promise中的嵌套
Vue中在新窗口打开页面及Vue-router的使用
01-21
在开发提分加项目的过程中，遇到了点击下拉菜单时在新窗口中打开页面，由于之前一直做的是单页面应用，没有碰到过类似的需求，于是上网搜了一下解决办法，也再次系统地温习了一下vue-router。 解决 使用路由对象...
vue i18n 极速解决方案vue-swift-i18n(vscode插件)
RichieChoo1993的博客
06-28 2497
Vue i18n 契子 Vue国际化非常的繁琐: 将所有出现的要国际化的汉字复制取名配置 在vue/js文件中找到汉字位置，区分是在template中标签的label或者其他property中，或者{{}}中script，又或者script中的，手动将一层一层的国际化key拷贝，粘贴。 就算是相同的汉子，由于在vue中的语法不同，需要重复的拷贝，粘贴 碰到一堆汉字拼接的简直要了老命/(ㄒoㄒ)/~~ 快速开始 安装 （商店搜索vue-swift-i18n，或者ctrl+p,输入ext ins
vue 碰到的小坑 持续更新中。。。
01-08
在Vue.js开发过程中，我们经常会遇到各种各样的小问题，这些问题看似微不足道，但却可能耗费不少时间去解决。本文将记录并详细解释一个与日期处理相关的问题，特别是在使用`el-date-picker`组件时遇到的一个常见坑。...
JavaScript的self和this使用小结
huangxy10的专栏
01-09 1756
JavaScript的self和this使用小结 本文摘自:http://www.cnblogs.com/reommmm/archive/2010/01/20/1652469.html 一、self 　　这个非常简单。我们知道，打开任何一个网页，浏览器会首先创建一个窗口，这个窗口就是一个window对象，也是js运行所依附的全局环境对象和全局作用域对象。sel
vue使用详解
weixin_38243562的博客
07-27 353
深度建视 加属性deep:true 简写 vue绑定style样式 改进 条件渲染
Vue中的this
热门推荐
z1216108894的博客
11-22 1万+
如果是vue实例本身的属性和方法,那么this指向就是vue实例本身,比如methods对象,computed对象,watch对象里的方法。 要用方法名(){}写,就代表this指向是vue实例,如果使用()=>{}箭头函数的方式定义方法,则this指向window,因为箭头函数中的this指向的是外部函数的this指向,普通函数的this指向的是它的调用者,而vue中的methods和computed和watch他们都是vue本身的方法所以只要他们使用普通函数定义this当然指向他们的调用者即th
vue学习之旅
qq_36710854的博客
11-25 193
vue学习遇到的问题-this指向调用问题JavaScript普通函数this的用法VUE中存在的冲突源码createdshowMessage1()showMessage2() JavaScript普通函数this的用法 普通函数的this是由动态作用域决定，它总指向于它的直接调用者。具体可以分为以下四项： this总是指向它的直接调用者， 例如 obj.func() ,那么func()里的th...
vue小记——this(1)
2301_78796401的博客
02-20 2072
在JavaScript中，this是一个特殊的关键字，它在函数被调用时自动定义。this的值在函数被调用时决定，取决于调用的上下文（context），它代表了函数运行时的当前对象。
vue中js文件里获取this（vue实例）
wwf1225的博客
08-23 1985
vue中js文件里获取this（vue实例）=>(就是把main.js引入到相应的js文件中，如import that from '@/main'2，传参的形式传入当前页面中的this,js文件接收this即可，（自行百度，用的机会较少，js一般都是公共方法，每次使用都要传入this）原文链接：https://blog.youkuaiyun.com/weixin_42618523/article/details/112171107。1，在main.js中抛出vue实例，在需要用到的地方引入即可。
Vue中this指向的问题
诗酒趁年华
05-09 6941
在下面的例子中可以看出，普通函数的this指向的就是Vue的实例，this.message可以获取到data中的值， 而箭头函数的this指向了window，不能获取到值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Docume...
Vue 对象无法通过 this来获取本Vue对象声明的变量
91奔跑的蜗牛
03-04 1566
箭头函数的this总是指向词法作用域，也就是外层调用者obj。 外层调用者的全局变量必须为 var，否则会出错。 <script> let num = 100; // let 声明的全局变量，Vue对象里面的箭头函数无法通过this来获取 var num2 = 200; let vue = new Vue({ el:"#app", ...
Javascript 中出现<object>对象未定义的可能原因及解决办法
ouhaochuan的专栏
12-01 1万+
在html页面中定义了一个ActiveX对象 在后台js代码中引用该对象，如果是直接引用fileSelector，而且是在$(document).ready()事件中引用，通常会出现对象未定义的情况，可能是由于jQquery库的影响，具体怎么影响不知道。下面是一种可行的引用方法，通过选择符来引用： $(document).ready(function () { // 文件操作控件 va
vue-element-ui说明文档
最新发布
03-22
### 关于 Vue 和 Element-UI 的详细说明 Vue 是一种流行的前端框架，而 Element-UI 则是一个基于 Vue.js 实现的桌面端组件库。以下是关于如何查找官方文档以及一些常见使用的补充说明。 #### 查找 Vue Element-UI 官方文档的方法 可以直接访问 [Element-UI 官网](https://element.eleme.io/) 获取最新的官方文档和教程[^2]。官网提供了详细的 API 文档、示例代码以及安装指南等内容，能够帮助开发者快速上手并解决开发过程中遇到的各种问题。 #### 组件注册与使用 在 Vue 中，无论是全局还是局部注册的组件都需要经过显式的声明才能正常使用。对于 Element-UI 来说，默认情况下如果采用完整引入的方式，则无需单独注册各个组件；但如果希望减少打包体积可以选择按需加载特定功能模块[^1]。 例如按照需求只引入 `el-button` 和 `el-input` 这两个控件时可这样操作： ```javascript import { Button, Input } from 'element-ui'; import Vue from 'vue'; Vue.use(Button); Vue.use(Input); ``` 随后便可以在项目内的任意地方像下面一样直接调用它们了: ```html <template> <div> <!-- 主按钮 --> <el-button type="primary">点击这里</el-button> <!-- 输入框 --> <el-input v-model="message" placeholder="请输入内容"></el-input> </div> </template> <script> export default { data() { return { message: '' }; } }; </script> ``` #### 常见问题及其解决方案 当实际应用中可能会碰到某些特殊情况下的错误或者不符合预期的行为发生，比如尝试获取某个 DOM 元素却发现返回的是 undefined ，这通常是因为目标节点由条件渲染指令(v-if)控制，在挂载阶段尚未真正呈现到界面上所致[^3] 。针对这种情况建议改用 nextTick 方法等待视图更新完成后再执行相应逻辑: ```javascript this.$nextTick(() => { console.log(this.$refs.myDom); // 此处应该能正常取得元素对象 }); ``` 另外还有关于富文本展示方面的问题提到过一次，即编辑完成后的内容无法正确解析样式的情况，对此给出了解决办法是在承载这部分数据的地方额外附加指定 CSS 类名 `.ql-editor` 即可恢复正常的视觉效果. 最后值得一提的就是布局管理部分的知识点了，在 element ui 提供了一套灵活强大的栅格化系统用于构建响应式网页界面设计。其中每行列数默认支持最大分割成二十四份，并允许我们借助 span 参数来自定义宽度比例分配给不同区域占用的空间大小[^4]. 下面给出了一个简单的例子演示如何利用这一特性实现两栏不均分布排列的效果： ```html <div class="block"> <el-row :gutter="20"> <el-col :span="6"><div class="grid-content bg-purple"/>左侧窄栏</el-col> <el-col :span="18"><div class="grid-content bg-purple-light"/>右侧宽栏</el-col> </el-row> </div> ``` ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值