v-for循环中的Vue js - ref始终返回null。
v-for循环中的Vue js - ref始终返回null。
提问于 2022-03-09 17:08:47
我正在尝试访问Vue中的一个元素，因为我希望看到它何时发生了类的更改(我使用的是Bootstrap，所以我想观察一个类何时更改为显示)。问题是，当我将ref'd元素放入v-for循环时，它总是返回null。我尝试在ref的名称后面加上循环项的索引，然后尝试将其记录到控制台，它总是返回'null‘。
当我从v-for循环中取出元素时，它就会返回精细的元素。
我似乎找不到解决办法。这就是Vue根本不支持的东西吗？如果没有，是否有更好的方法来观察DOM以查看元素的类是否发生了更改？
我用的是合成API。
模板：
<template>
<div v-for="room in rooms" :key="room.id" class="">
<p class="test" :ref="'test'+room.id">Hello world</p>
</div>
</template剧本：
setup(){
const test1 = ref(null)
onMounted(() => {
console.log("test1: ", test1.value)
})
return { test1 }
}回答 1
Stack Overflow用户
发布于 2022-03-09 17:16:14
这看起来是一个非常常见的问题，所以我深入研究了Vue源代码，发现了以下内容：
这是Vue进行更新和呈现方式的一个限制。如果同一个模板有多个s，那么每个模板都有自己的修补程序队列。每个补丁队列都按照自己的计划进行处理，因此在另一个补丁队列启动之前就可以完成。如果发生这种情况，那么队列中的一个更新就不会发生。这意味着Vue不会检测到元素的更改，因此根本不会进行任何重新呈现，这就是为什么您的元素不会出现在控制台输出中！
您可以通过确保所有更新队列在彼此开始之前完成，这可以通过向您的组件添加一个update: { sync: true }配置来完成。这将迫使Vue在处理应用程序中的任何其他更改之前，同步处理所有更新队列。
您还可以向父组件添加一个sync: true配置，该组件封装所有其他组件，并确保它们都同步。
<script>
setup() {
const test1 = ref(null)
onMounted(() => {
console.log("test1: ", test1.value)
})
return { test1 }
}
render() {
return (
<div>Hello World</div>
)}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71413306
复制相关文章
相似问题
腾讯云开发者
