vuejs 获取动态的dom节点,为什么点击两次才能获取到dom真实的宽?

iop_js_L
  • 62

鼠标点击一次会动态生成dom插入el-ag,但是获取的父span却是不准确,感觉总是上一次的width,除非点击两次才能获取到,我想获取的就是el-select多选框生成的tag选项的宽

<div class="el-select__tags">
    <span>
        <span class=“el-tag”>生成的dom1</span>
        <span class=“el-tag”>生成的dom2</span>
    </span>
</div>
 computed: {
        valueData () {
            this.$nextTick(() =>{
                // 在这里面去获取DOM
                this.tagWidth = document.querySelector('.el-select__tags span').clientWidth
                console.log(this.tagWidth )
            })
        }
    }
回复
阅读 2.8k
2 个回答
注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代
let spanWidth = document.querySelector('.el-tag')

document.querySelector始终会获取到第一个符合条件的元素,你要使用document.querySelectorAll获取一个包含所有符合条件的数组

宣传栏