Vue.js 正在异步v-for中获取组件的引用

我有一个在异步调用发生后才创建的项目列表。我需要能够获取第一个（或任何）已创建项的getBoundingClientRect（）

以这段代码为例：

<template>
    <div v-if="loaded">
        <div ref="myItems">
            <div v-for="item in items">
                <div>{{ item.name }}</div>
            </div>
        </div>
    </div>
    <div v-else>
        Loading...
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        data() {
            return {
                items: []
            }
        },
        created() {
            axios.get('/url/with/some/data.json').then((response) => {
                this.items = response.data;
                this.loaded = true;
            }, (error) => {
                console.log('unable to load items');
            });
        },
        mounted() {
            // $refs is empty here
            console.log(this.$refs);

            // this.$refs.myItems is undefined
        }
    };
</script>

{{item.name}
加载。。。
从“axios”导入axios；
导出默认值{
数据（）{
返回{
项目：[]
}
},
创建（）{
get（'/url/with/some/data.json'）。然后（（响应）=>{
this.items=response.data；
this.loaded=true；
}，（错误）=>{
console.log（'无法加载项'）；
});
},
安装的（）{
//$refs在此为空
console.log（这是$refs）；
//此.$refs.myItems未定义
}
};

因此，我试图访问

mounted（）

方法中的

myItems

ref，但是

this.$refs

此时是空的

{}

。因此，我尝试使用组件

watch

，以及各种其他方法来确定何时可以读取

ref

值，但没有成功

有人能把我引向正确的方向吗

一如既往，再次感谢

更新

在

mounted（）

方法中添加了

this.$watch

，而

$refs

仍然返回为

{}

。然后，我将

updated（）

方法添加到代码中，然后可以访问那里的

$refs

，它似乎可以工作。但是，我不知道这是否是正确的解决方案

---

vuejs通常如何处理诸如基于异步数据将

div

动态移动到屏幕位置之类的事情？这与我试图做的类似，在屏幕上抓取一个元素，一旦它首先被渲染（如果它甚至应该基于异步数据进行渲染），然后访问它来处理它（将它移动到某个位置）

而不是在

上执行此操作。$refs.myItems

在装载期间，您可以在axios承诺返回响应后执行此操作

---

您还可以更新

项目

和

加载的

，如果您想使用watch，您可以使用这些

而不是在

上执行此操作。$refs.myItems

在装载期间，您可以在axios承诺返回响应后执行此操作

---

您还可以更新

项目

和

加载的

，如果您想使用watch，您可以稍微晚一点使用这些

，也许这对某人有帮助

问题是，您使用的是

v-if

，这意味着带有

ref=“myItems”

的元素还不存在。在您的代码中，这仅在Axios解析时发生，即

this.loaded

更好的方法是使用

v-show

<template>
<div>
    <div v-show="loaded">
        <div ref="myItems">
            <div v-if="loaded">
            <div v-for="item in items">
                <div>{{ item.name }}</div>
            </div>
            </div>
        </div>
    </div>
    <div v-show="!loaded">
        Loading...
    </div>
</div>
</template>

{{item.name}
加载。。。

不同之处在于，具有v-show的元素将始终呈现并保留在DOM中；v-show仅切换元素的显示CSS属性

---

有点晚了，也许对某人有帮助

问题是，您使用的是

v-if

，这意味着带有

ref=“myItems”

的元素还不存在。在您的代码中，这仅在Axios解析时发生，即

this.loaded

更好的方法是使用

v-show

<template>
<div>
    <div v-show="loaded">
        <div ref="myItems">
            <div v-if="loaded">
            <div v-for="item in items">
                <div>{{ item.name }}</div>
            </div>
            </div>
        </div>
    </div>
    <div v-show="!loaded">
        Loading...
    </div>
</div>
</template>

{{item.name}
加载。。。

不同之处在于，具有v-show的元素将始终呈现并保留在DOM中；v-show仅切换元素的显示CSS属性

---

对不起，我不明白你在问什么。看这把小提琴

ref

在异步呼叫后工作对不起，我不明白你在问什么。看看这个fiddle

ref

在异步调用后工作