vue中document.getElementById 怎么写都为空

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量818 收藏
点赞数 1
文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Kiritovo/article/details/132896184
版权

vue中document.getElementById 怎么写都为空

  • 首先核查基础的id是否写的完全一致
  • 方法如果是位于**created()中元素挂载不稳定，会出现为空的情况(修改到mounted()**方法中即可)
  • script标签上加defer=true的属性 此方法我尝试了并不好使
  • 确保你的代码在页面加载完毕后再执行，若JavaScript代码在页面加载完成之前执行，那么getElementById()方法将无法找到对应的元素。
一个不愿透露姓名的糕
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
TypeError document.getElementById(…) is null错误原因
12-09
今天手写了一个简单的页面做测试用，写完js部分总是报 TypeError document.getElementById(…) is null 这个错误，代码看了几遍，语法上没找着什么错误，没办法，就在互联网上搜索了一下，才发现 document.getElementById 这个根据id找节点的语法写法还是有点讲究的，具体如下： （1）如果写在 id 所在节点的前面，比如 head 块中，则要如下写法： 代码如下: [removed]=function(){  ……js代码 } 以上代码的意思是在html元素加载完后再运行js （2）写在 id 所在节点的后面，不然就会报 Type
document.getElementById为空或不是对象的解决方法
10-29
document.getElementById为空或不是对象的解决方法，一般情况下注意先内容后js.
Vue中在setup里使用getElementById为null
m0_63666855的博客
03-04 371
分析：在setup中，这个时候Vue尚未完成挂载，也就不能通过getElementById获取Dom元素，所以控制台打印为null，应该将代码迁移到onMounted中。在setup中获取dom,打印出来结果为null。
Vue中使用getElementById结果返回元素为null ？
云间月
03-31 2万+
【记一次粗心Bug】 Vue中使用getElementById结果返回元素为null ？ 文章目录【记一次粗心Bug】 Vue中使用getElementById结果返回元素为null ？在created()中使用getElementByIdmounted()中使用getElementByIdcreated()中结合this.$nextTick()实现业务需求总结 首先，我在项目中用这样一个需求，...
vue ref 和 $refs 和原生的document.getElementById
wwf1225的博客
11-25 5308
vue ref 和 $refs 和原生的document.getElementById 如图，ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： 在上面的例子中，input的引用信息为input1 ，$refs 是所有注册过的ref的一个集合， console.log(this.$refs.input1)//<input type="te...
Vue(五)
weixin_44482737的博客
07-27 209
第一个例子需求1定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。这里要注意的是directives中函数的this指向指的是window对象；也可以进行全局配置，组件化之后可用当前的n值是放大10倍后的n值是需求2注意这里的this都是指向window的，而不是Vue如下{fbind{...
解决vue中使用document.getElementById()拿到的是同一个值的问题（两种方法），即在vue中大容器里面，获取其中小容器的属性值
m0_64053511的博客
05-18 1万+
一、问题描述 1.实现功能：点击每一个大的框，获取里面的小框的值（ct01......ct07等） 2.vue里面页面的代码（通过v-for循环得到数据，展示到页面，实现一个列表功能） <div class="card-wrapper"> <!--i是索引值，item是索引值对应的值--> <!--这里面我写的user是Data里面的数组--> <!--@click="showP..
vue document.getElementById值为空的原因及解决方法
Ttowx的博客
05-19 3304
②在vue中，利用this.$nextTick(()=>{①script标签上加defer=true的属性。②js代码在head前，即dom元素渲染前。//获取到的是数据更新后的Dom数据。
vue中使用document.getelementbyid为null
曾大强博客
02-08 2229
在检查过id的拼写正确的情况下，而且在初始化数据是在mounted之后执行的，检查过代码，发现正文部分挂载发生错误，这时会出现找不到的情况。
vue中ref与document.getElementById()的使用
m0_52604918的博客
02-22 656
ref、document.getElementById()
vue v-else中使用document.getElementById获取不到值的问题
Spy003的博客
08-20 3076
然后我尝试，把含有id组件写在v-if中，这时可以获取到组件了，但是当v-else的组件显示出来以后，发现同一个位置，v-else页面控件对应的位置也能获取到这个id，于是我发现，：我把含有id的标签写在了v-else中，结果，通过document.getElementById获取不到组件，这个问题困扰了我两天，我经过反复排查，终于定位到了问题出现在v-if / v-else 判断属性中，vue v-else中使用document.getElementById获取不到值的问题。
浅谈vue中document.getElementById()拿到的是原值的问题
10-15
主要介绍了浅谈vue中document.getElementById()拿到的是原值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
TypeError document.getElementById(...) is null错误原因
09-03
主要介绍了TypeError document.getElementById(...) is null错误原因,这是很容易犯的一个低级错误,需要的朋友可以参考下
Vue的处理用户事件
qq_43733682的博客
05-30 624
在js的时候，关于事件，DOM操作还是比较繁琐的，例如 document.getElementById("btn").addEventListener("click", function () { alert("Hello World"); }); 上面的两步操作 第一：给元素添加点击事件 第二：给点击事件添加方法 但是在Vue里面是很简单的 1.v-on:(事件绑定) 第一：给事件添加点击事件，不过在Vue里面不叫点击事件了，叫做事件绑定 <button v-on:click="add"&gt
vue中document.getElementById()拿到的是原值的问题
Beam
05-15 1万+
问题 两个界面都有id="test"的div，内容不同，路由切换的时候document.getElementById()拿到的是原界面的值。 问题代码 // 页面1 <div id="test">aaa</div> // 页面2 <div id="test">bbb</div> // 路由切换如下： <transition name="car...
document.getElementById获取不到值的几种原因分析
热门推荐
java journey
09-23 5万+
前几天修改那个分页类，想加入跳转到指定页的功能，就是用户直接输入页码，点击按钮就可以跳到指定的页码！     一看这个需求，就可以想到利用GET传值的方式，但常规GET方式需要把链接写入标签的a href里面，而我们实际上是希望用按钮来进行点击，而不是一个简单的超链接形式。于是
Vue-声明式渲染
weixin_45497246的博客
03-16 296
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： <body> <div id='app'>{{content}}</div> //通过插值表达式{{}}调用data里的数据进行渲染 <script> // var dom = document.getElementById('a...
【js】vue获取document.getElementById(a)为null
每天进步一点点, 靠近小目标一点点~
11-02 1116
在菜单A页面点击某个元素携带id跳转到B详情页面，B页面获取该id元素的offsetTop, 并自动滚动到该元素处
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 631
步骤很详细，直接上教程……
vue中document.getElementById中document报红
11-22
在Vue中，使用document.getElementById()方法时，可能会出现document报红的情况。这是因为Vue使用了虚拟DOM来管理和更新页面的元素，而不是直接操作原生的DOM元素。因此，直接使用document.getElementById()方法可能无法获取到Vue渲染后的DOM元素。 为了解决这个问题，可以使用Vue提供的$refs属性来获取DOM元素。$refs属性是一个对象，其中包含了通过ref属性标记的DOM元素。通过在需要获取的元素上添加ref属性，然后在Vue实例中使用this.$refs来访问该元素。 下面是一个示例代码： ```html <template> <div> <div ref="myElement">Hello Vue!</div> <button @click="getElement">获取元素</button> </div> </template> <script> export default { methods: { getElement() { let element = this.$refs.myElement; console.log(element); // 输出获取到的DOM元素 } } } </script> ``` 在上面的代码中，我们在div元素上添加了ref属性，并命名为myElement。然后，在getElement方法中使用this.$refs.myElement来获取该元素，并将其打印到控制台上。 通过使用$refs属性，我们可以在Vue中获取到渲染后的DOM元素，而不需要直接使用document.getElementById()方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值