vue.js - 如何在 vuejs 中的方法中访问 refs

Question

我想在方法对象内的函数中访问模板引用。目前，它在访问 refs 时抛出 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>

我在脚本标签中的代码如下：

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

请提供解决方案，通过访问我的函数中的模板引用来获取宽度。提前致谢。

标签： vue.jsreferencevuejs2vue-componentref

Answer 1

您需要为ref要定位的元素添加一个属性。

我不确定您到底要做什么，所以这里是一个通用示例：

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

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

Vueref文档