Vuejs gets dynamic dom nodes. Why does it take two clicks to get the true width of dom?

one mouse click will dynamically generate dom and insert el-ag, but the parent span obtained is not accurate. It feels that the last width, can only be obtained by clicking twice. What I want to get is the width of the tag option generated by the el-select multi-box

.
<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 )
            })
        }
    }
Jun.27,2021

notice that the: querySelector () method returns only the first element that matches the specified selector. If you need to return all the elements, use the querySelectorAll () method instead of

let spanWidth = document.querySelector('.el-tag')

document.querySelector always gets the first eligible element. You need to use document.querySelectorAll to get an array containing all the eligible elements

Menu