如何解决Vue中mounted不能获取到data

Vue中使用mounted时,无法获取到data的原因是,this无法指向data中的数据。在mounted生命周期中this指向的是window对象而不是Vue对象,所以真正找的是window对象下的data,但是window下没有data,所以就报错了。
解决办法很简单,把指向vue对象保存给一个变量that,在后面引用that来修改数据即可。

问题展示

javascript
1
2
3
4
5
6
                    data(){
    'name':"潘某人seo"
},
mounted(){
    console.log(this.name)
}               

运行结果会发现无法获取到‘name’,因为mounted是从window上获取“name”;而data是在vue对象上的。
Vue中mounted不能获取到data

解决方案

javascript
1
2
3
4
5
6
7
                    data(){
    'name':"潘某人seo"
},
mounted(){
    var that = this;
     console.log(that.name)
}               

申明:本站内容仅代表个人观点,仅供学习参考;未经授权任何个人或组织单位不得复制、转载、摘编以及其它形式的应用!

本站文章可能使用到互联网上的资料,若对您造成困扰,请联系 kk19@foxmail.com除理

本文地址:https://www.chateach.com/it/vue/862mounted

相关文章

  • js中的数组元素的添加方法

    js数组添加元素

    js中的数组元素的添加方法,主要有三种方法,用索引元素添加、push( )方法、unshift()方法,push()方法在数组的尾部添加一个或多个元素,并返回数组新的长度,修改并替换了原始数组而非生成一个修改版的新数组。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 815
    • js数组添加元素
  • .gitignore不生效问题解决方法

    gitignore不生效

    git push的时候 .gitignore中已经标明忽略的文件目录下的文件,git push的时候还会出现在push的目录中,或者用git status查看状态,想要忽略的文件还是显示被追踪状态。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1269
    • gitignore不生效
  • 原生AJAX请求实例教程

    AJAX

    如何使用原生javascript进行ajax数据请求呢?可以不重新加载整个网页通过刷新网页部分内容达到数据的更新展示。可以有效的降低对带宽的需求,提高网页的性能;Ajax有同步和异步两种实现方式。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1269
    • AJAX
  • java中的JDK、JRE、JVM三者的区别

    JDK,JRE,JVM

    java中的JDK、JRE、JVM三者的区别,JDK是 Java 语言的软件开发工具包(SDK);JRE(Java Runtime Environment,Java运行环境),包含JVM标准实现及Java核心类库。JVM(Java Virtual Machine),即java虚拟机, java运行时的环境,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1094
    • JDK
    • JRE
    • JVM
  • DeepSeek一键部署,不用等待模型下载,创建即可使用。

    DeepSeek部署

    DeepSeek一键部署,不用等待模型下载,创建即可使用。腾讯云Cloud Studio 内置Ollama、多个DeepSeek-R1模型 ,每月向开发者提供 10000 分钟免费算力。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 4950
    • DeepSeek部署
  • Spring Boot 如何解决跨域问题

    SpringBoot跨域

    SpringBoot 如何解决跨域问题方法,CORS全称Cross-Origin Resource Sharing,意为跨域资源共享。当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求。如果此时另一个资源不允许其进行跨域资源访问,那么访问的那个资源就会遇到跨域问题。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 941
    • SpringBoot跨域
  • html网页如何禁止打印页面

    禁止打印页面

    html网页如何禁止打印页面方式,可以禁止打印键盘的快捷键组合,但是用户可以直接鼠标操作浏览器来实现打印;所以通过css来屏蔽打印内容的输出更加的合理有效,代码如下所示。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1840
    • 禁止打印页面
  • JavaScript简介

    JavaScript简介

    JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1804
    • JavaScript简介
  • springboot网站搭建部署详细流程

    springboot

    linux环境如何搭建java框架springboot,为大家演示一种快速简单的搭建springboot的方法。由于springboot是java的众多框架之一,因此需要部署好java的运行环境,即服务器安装好jdk18以及tomcat3,注意版本的兼容性。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1479
    • springboot
  • linux换将下安装Composer的方法

    Composer安装

    linux换将下安装Composer的方法,对于需要使用laravel框架开发站点,安装Composer是非常有必要的,可以使得laravel的安装管理变得更加的方便快捷。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1226
    • Composer安装
  • php简介

    什么是php

    PHP即“超文本预处理器”,是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言,与C语言类似,是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1482
    • 什么是php
  • java如何切分割字符串

    java,字符串

    在我们日常工作中经常遇到截取字符串的需求,这里重点介绍两种常见的java截取字符串方法。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1065
    • java
    • 字符串
  • laravel Request的所有方法详解

    laravel Request,cookie,http参数

    laravel Request的所有方法详解,laravel实现如何获取cookie、表单参数、提交的文件、laravel如何获取网址url、路径、ip、端口等。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1716
    • laravel Request
    • cookie
    • http参数
  • linux系统CentOS发送邮件

    CentOS发送邮件

    如何在linux、ubuntu、centos系统中发送邮件,如定时发送网站日志,或者服务器信息状态,如何在centos系统中配置邮件发送功能。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1546
    • CentOS发送邮件
  • Vue 中使用 localStorage 详解

    localStorage,Vue

    什么是localStorage,与cookie的区别是什么,localStorage的生存期、数据结构、域名限制、浏览器支持;localStorage常用方法,存储数据setItem、读取数据getItem、修改数据、删除数据。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1523
    • localStorage
    • Vue
  • js防抖原理及其实现

    js防抖

    js防抖原理及其实现,在前端中有一些事件会频繁的触发容易造成页面卡顿,例如:window 的 resize、scroll、mousedown、mousemove、keyup、keydown等事件。js抖动的原因:短的时间内多次连续触发事件,首先会十分影响性能,同时大量运行结果被集中输出,结果之间不规律的冲突变化导致页面抖动。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1472
    • js防抖
  • SpringBoot中的异常处理的详细教程

    SpringBoot,异常处理

    SpringBoot中的异常处理的详细教程,处理用户请求出现运行时异常时直接响应给用户的是一个错误界面,对于用户的使用体验不友好。什么是全局异常处理机制,用来解决整个系统中任意一个控制器抛出异常时的统一处理入口,如何使用全局异常处理类 implements HandlerExceptionResolver,之后重写接口中的resolveException方法。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1211
    • SpringBoot
    • 异常处理
  • vue框架简介及其优势

    vue框架,vue优势

    vue框架简介及其优势,Vue 是一套用于构建用户界面的渐进式JavaScript框架,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。。但是vue对于SEO并不是非常友好,及其解决方案。

    用于表示时间的图标 一个时钟的图标,用于向用户表达后面跟着的是一个时间
    用于表示阅读次数的图标 一个类似睁开眼睛的图标,用于向用户表达后面跟着的数字是一个阅读的次数 1832
    • vue框架
    • vue优势