访问 Vue 子组件引用以进行 DOM 操作

问题描述

我正在尝试从子组件访问 ref 以访问 DOM 以删除类名。当我将 ref 放在子组件上时，ref 在安装时返回 undefined 。如果我放入标签，我似乎无法访问 childNodes。我有这个控制台日志。$ref.foo[0].childNodes[0] 是这个“-->”我想知道是否有人可以帮助我？

<template>
  <div id='listing-page'>
    <section v-for='(card,cardindex) in cards' :key='cardindex'>
      <article v-if="card.cardType == 'Standard'" class="standard" ref="foo">
          <StandardCard :post="post" v-for="(post,index) in card.items" :key="index" :id="'standard '+ cardindex"></StandardCard>
      </article>
      <lazy-component v-if="card.cardType == 'Advertisement'" :id="'advertisement ' + cardindex">
        <AdvertiseCard :post="post" v-for="(post,itemIndex) in card.items" :key='itemIndex'/>
      </lazy-component>
    </section>
    <EndingDivider/>
  </div>
</template>
<script>
export default {
  name: 'BreakingNewsListingPage',components: {
    'StandardCard': () => import('@/views/StandardCard.vue'),'AdvertiseCard': () => import('@/components/AdvertiseCard.vue'),'EndingDivider': () => import('@/components/EndingDivider.vue')
  },mounted () {
      console.log(this.$ref.foo[0].childNodes[0])
    },}
}
</script>
<style></style>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）