как получить доступ к ссылкам в методах в vuejs

Question

Я хочу получить доступ к шаблону ref в функциях внутри объектов метода.В настоящее время он выдает undefined при доступе к ссылкам.

Мой код ниже:

<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>

А тег My Code in Script ниже:

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

Просьба предоставитьРешение, чтобы получить ширину, используя ссылку на шаблон в моей функции.Заранее спасибо.

Answer 1

Можно попробовать

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

Answer 2

Вам нужно добавить атрибут ref к элементу, на который вы хотите нацелиться.

Я не совсем уверен, что именно вы пытаетесь сделать, вот вместо этого общий пример:

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

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

Vue ref документация