问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
可乐.
    20529

    我希望能够获取<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元素?

    前端javascriptvue.js
    阅读 1k
    avatarAI BotBETA

    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>
    2 个回答
    得票最新
    头像头饰
    MrBigShot
      4.8k1587118
      ✓ 已被采纳
      v-if="!initLoading && !loading"

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

      头像
      木木剑光
        2.2k1422
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题
        宣传栏