[Vuejs]-How to detect whether an element inside a component is overflown in Vue?

by

1👍

✅

So, like I’ve mentioned in one of the edits, docs warn that $refs shouldn’t be used for initial rendering since they are not defined at that time. So, I’ve made tooltip a property instead of a getter and calcuate it in mounted:

export default class ResultPill extends Vue {
...
    tooltip = '';
    calcTooltip () {
        // specific logic here is not important, the important bit is this.isContainerSqueezed()
        // works correctly at this point
        this.tooltip = !this.isContainerSqueezed() ? this.mainTooltip :
            this.label + (this.mainTooltip ? '\n\n' + this.mainTooltip : '');
    }
    get mainTooltip (): string { ..previously used calculation.. }
    ...
    mounted () {
        this.calcTooltip()
    }
}
👤YakovL

Leave a comment