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

Я хочу получить доступ к шаблону 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() {},
}

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


reference vue.js vuejs2 vue-component ref
person Manush    schedule 27.02.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

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

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

person James Coyle    schedule 27.02.2019
comment
он выдает undefined, когда я пытаюсь получить доступ к myElement - person Manush; 27.02.2019
comment
Из документов: $refs are only populated after the component has been rendered, and they are not reactive. It is only meant as an escape hatch for direct child manipulation - you should avoid accessing $refs from within templates or computed properties. - person James Coyle; 27.02.2019
comment
Вам нужно будет обработать это в обратном вызове mounted. - person James Coyle; 27.02.2019

arrow_upward
0
arrow_downward

Ты можешь попробовать

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