获取不到html页面上的元素,Vue v-for渲染页面，获取不到DOM元素解析

v-for 渲染循环渲染页面的出现让我们告别了繁琐的JS拼接，在开发上面节省了很多时间。

近期在开发中发现了在某些特定情况下，出现了获取不到渲染出来的DOM元素的情况，原因身为小白的我暂时还没搞清楚(忘大佬指出)，但是却得出来初步的解决方案。

HTML 代遇新是直朋能到码

JS 代码(错误代码比抖朋要插支一圈不者地)

// 错误代码示例一

var vm = new Vue({

el: '#app',

data: {

abc: new Object()

mounted: function () {

this.getList();

var li = document.querySelectorAll('li');

console.log(li.length); // 输出0

methods: {

getList: function () {

var data = [

{ name: '1', age: '21' },

{ name: '2', age: '22' },

{ name: '3', age: '23' },

{ name: '4', age: '24' },

{ name: '5', age: '25' }

];

this.$set(this, 'abc', data);

}

})

// 错误代码示例二

var vm;

window.onload = function(){

vm = { ... } // 实例化代码如上，去除 mounted 生命周期

vm.getList();

var li = document.querySelectorAll('li');

console.log(li.length); // 输出0

}

上述代码中的 li 即是通过 v-for 渲染生成，但是两种方式获取 li 输出的长度都为0。

最终发现将数据初始化放到 beforeMount 里面即可在 mounted 里面正确输出获取到 li 元素的长度。

JS 代码(解决方案比抖朋要插支一圈不者地)

// 解决方案一(数据初始化放在挂载之前)

var vm = new Vue({

el: '#app',

data: {

abc: new Object()

beforeMount: function(){

this.getList();

mounted: function () {

var li = document.querySelectorAll('li');

console.log(li.length) // 输出5

methods: {

getList: function () {

var data = [

{ name: '1', age: '21' },

{ name: '2', age: '22' },

{ name: '3', age: '23' },

{ name: '4', age: '24' },

{ name: '5', age: '25' }

];

this.$set(this, 'abc', data);

}

})

// 解决方案二(mounted周期里面使用VUE自带钩子函数$nextTick做处理)

mounted: function () {

this.getList();

this.$nextTick(function () {

var li = document.querySelectorAll('li');

console.log(li.length) // 输出 5

})

}

获取不到html页面上的元素,Vue v-for渲染页面，获取不到DOM元素解析相关推荐

一个vue请求接口渲染页面的例子
new Vue({el:'#bodylist',data: {list: [{"type_id": "1","type_name": &qu ...
python渲染html页面_python接口自动化29-requests-html支持JavaScript渲染页面
前言 requests虽好,但有个遗憾,它无法加载JavaScript,当访问一个url地址的时候,不能像selenium一样渲染整个html页面出来. requests-html终于可以支持Java ...
实现元素拖拽放大缩小_Vue实战067：DOM元素拖拽效果的实现
DOM元素拖拽效果: 当鼠标选中目标元素之后可以将其拖放至指定区域的任意位置,实现的思路主要是通过鼠标事件按下.移动.抬起,摁下鼠标时记录鼠标位置以及元素位置并算出鼠标相对元素的位置,在拖拽时记下当前 ...
js如何监听元素事件是否被移除_javascript – 如果一个DOM元素被删除,它的监听器也从内存中删除？...
现代浏览器纯JavaScript 如果被删除的DOM元素是无引用的(没有指向它的引用),那么yes – 该元素本身被垃圾收集器以及与其相关联的任何事件处理器/监听器拾取. var a = docum ...
后台数据展示到页面上的过程(vue)
1. 后台将数据接口上传至服务器可以使用swagger-ui文档进行前后端分离开发 2. 封装后台接口这里专门创建了一个api的文件夹写api接口方法,不是完全必要,但这么做后期维护起来比较方便. ...
html5 元素重叠,javascript – 检查两个或多个DOM元素是否重叠
在查看代码之后,当您从开始和结束时间开始处理时,检查渲染的元素是否过于复杂似乎过于复杂. 我这样做的方法是将碰撞在数组中的事件分组,如下所示: let collisions = [ // only 1 ...
vue websocket 实时渲染页面
let app = new Vue({-}) app.args = respone.socket;
获取DOM元素方法小结
在开发中不可避免的需要操作DOM,现在就来总结一下原生的获取DOM的API. getElementById() 该方法是最常用的通过元素的id属性来获取DOM元素的API,返回一个DOM元素. < ...
html页面执行sql语句,关于在页面上执行sql语句
在页面上执行sql语句,首先在页面上顶一个文本域,让用户输入需要执行的sql语句. html代码如下: New Document 执行输入的sql: 然后最重要的是如何获取选中的文本并且让其在后台执 ...
使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小
使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素然后:secti ...

获取不到html页面上的元素,Vue v-for渲染页面，获取不到DOM元素解析

获取不到html页面上的元素,Vue v-for渲染页面，获取不到DOM元素解析相关推荐

最新文章

热门文章