javascript - vue 无法获取到template中的dom元素?

Question

我希望能够获取<template #loadMore>中 id为"is_load"的div元素
但是ref无法引用到 ,在onMounted函数中使用nextTick回调打印处理这个dom也是空的，等待渲染后也不行
有什么方法可以操作到dom

 <a-list          class="demo-loadmore-list"          :loading="initLoading"          item-layout="horizontal"          :data-source="list"          :locale="locale"      >        <template #loadMore>          <div id="is_load" ref="test"              v-if="!initLoading && !loading"              :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"          >            <a-button @click="onLoadMore">加载更多</a-button>          </div>        </template>        <!--     商品item信息-->        <template #renderItem="{ item }">          <a-card hoverable  class="custom-card">            <template #cover>              <img alt="example" :src="JSON.parse(item.imageUrl)[0]" class="item_image"/>            </template>            <a-card-meta :title="item.price+' 元'" style="text-align: center;">              <template #description>{{ item.goodsName }}</template>            </a-card-meta>          </a-card>        </template>      </a-list><script lang="ts" setup>import {onMounted, ref, nextTick} from 'vue';const test=ref();onMounted( () => {      console.log(test.value)  //打印为空  });document.getElementById("is_load")  //也没有拿到这个元素</script>

vue 无法获取到template中的dom元素?

Answer 1

可以打印一下 test，等渲染完了再去控制台展开输出的对象，看有值不，如果确认是时机的问题的话，可以用官方的 watchEffect 这种方案
https://cn.vuejs.org/guide/essentials/template-refs.html

Answer 2

v-if="!initLoading && !loading"

你的 initLoading 和 loading 数据在渲染完成后是什么情况，如果这个条件是 false 那确实没有渲染出来呀

Answer 3

Vue.js 无法直接访问在 <template> 标签内定义的 DOM 元素，因为这些元素在渲染过程中是动态生成的。使用 ref 可以在 Vue 实例中创建一个引用，指向模板中的 DOM 元素，但是你不能在模板标签内部直接使用 document.getElementById 来获取它。

在 Vue 中，ref 是一个特殊的属性，它可以被添加到任何元素上，然后你可以通过 this.$refs 在组件实例上访问这个元素。但是，$refs 只会在组件渲染完成后填充，并且它不会响应式地更新。

在你的例子中，你试图在 onMounted 钩子函数中访问 ref，但此时 DOM 可能还没有完全渲染，所以 this.$refs.test 是 undefined。

你可以尝试使用 nextTick 来确保 DOM 已经更新完毕。nextTick 是一个函数，它返回一个 Promise，这个 Promise 在下一个事件循环执行完毕之后解决。这样你就可以确保在 DOM 更新后执行你的代码。

以下是你的代码的修改版：

<template>  <a-list    class="demo-loadmore-list"    :loading="initLoading"    item-layout="horizontal"    :data-source="list"    :locale="locale"  >    <template #loadMore>      <div id="is_load" ref="test"           v-if="!initLoading && !loading"           :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"      >        <a-button @click="onLoadMore">加载更多</a-button>      </div>    </template>    <!--     商品item信息-->    <template #renderItem="{ item }">      <a-card hoverable class="custom-card">        <template #cover>          <img alt="example" :src="JSON.parse(item.imageUrl)[0]" class="item_image"/>        </template>        <a-card-meta :title="item.price+' 元'" style="text-align: center;">          <template #description>{{ item.goodsName }}</template>        </a-card-meta>      </a-card>    </template>  </a-list></template><script lang="ts" setup>import {onMounted, ref, nextTick} from 'vue';const test = ref();onMounted(() => {  nextTick(() => {  // 使用 nextTick 来确保 DOM 已经更新完毕    console.log(test.value);  // 现在应该能够打印出 div 的值了  });});</script>