CODEWITHSUNDEEP
vue.jsreferencevuejs2vue-componentref
Manush
Manush

Reputation: 1942

how to access refs in methods in vuejs

I want to access template ref in functions inside method objects. Currently, it throws undefined when accessing the refs.

My Code Below:

<template>
    <ul ref="lvl1_target" style="width: 440px" class="lvl1_target milestone_asset_data">
        <li :style="{'width': getMileStonePercent(4,'lvl1_target')}" class="hybse_data">
            <span></span>
            <i></i>
            <small>$4M</small>
        </li>
    </ul>
</template>

And My Code in Script tag is below:

export default {
    methods: {
        getMileStonePercent(num, secWrp) {
            let ele = this.$refs[secWrp]
            return ele.offsetWidth + '%'
        },
    },
    created() {},
}

Kindly, provide solution to get the width by accessing the template reference in my function. Thanks in advance.

Upvotes: 1

Views: 8546

Answers (2)

James Coyle
James Coyle

Reputation: 10418

You need to add a ref attribute to the element you want to target.

I'm not really sure what exactly you are trying to do so here is a generic example instead:

<template>
    <div ref="myElement"></div>
</template>

export default {
    methods: {
        setText() {
            this.$refs.myElement.innerHTML = "Hello world"
        },
    },
}

Vue ref documentation

Upvotes: 0

Sammi
Sammi

Reputation: 286

You can try

export default {
  methods: {
    this.$next(tick() => {
      setText() {
        this.$refs.myElement.innerHTML = "Hello world"
    }
  })
}}

Upvotes: -1

Related Questions