Question

我尝试根据存储隐藏数据的ID隐藏其他组件，如果组件的ID与道具ID不相同，我想隐藏其他组件

我无法访问组件的ID，我已经尝试使用$ refs.componentName.id

// html
<div class="box-portfolio" ref="boxPortfolio" v-for="item in data" v-        
bind:key="item.slug">
 <div class="wrap-the-portfolio" 
  ref="portfolioList" 
  :id="item.slug">
   {{item.slug}}
</div>

   //js
   data() {
    return {
     idRoute: '',
     data: []
    }
   },
   props: ['id'],
   watch: {
     $route: function() {
       if(this.$router.currentRoute.name=='UserPortfolioDetail'){
         const paramsNow =  this.$route.params.id;
         console.log(this.$refs.portfolioList); // get the component
         console.log(id); // can get the id
        if(this.refs.portfolioList.id == id){
          // do hide other $refs.portfolioList component
        }
      }
    }
  },

Answer 1

您无法使用this.$refs直接获取ID。由于this.$refs.componentName将返回vue实例，因此它不是HTML DOM结构。相反，您可以使用v-if来显示特定的DOM。

<div class="wrap-the-portfolio" 
     v-if="item.slug === id && $router.currentRoute.name !=='UserPortfolioDetail'">
     {{item.slug}}
</div>

如何检查组件ID，如果ID相同则隐藏其他组件

1 个答案: