Question

我想访问方法对象内部函数中的模板ref。当前，在访问引用时会抛出未定义的结果。

下面的我的代码：

<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() {},
}

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

Answer 1

您需要向要定位的元素添加ref属性。

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

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

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

Vue ref documentation

Answer 2

您可以尝试

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

如何在vue.js中的方法中访问引用

2 个答案: