vue.js - How to check component id, if id same then hide other component

Question

i try to hide other component based on id that store a slug data, if id of the component is not same as props id, i want to hide the other component

i cannot access the id of the component, i already try using $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
        }
      }
    }
  },

标签： vue.js

Answer 1

You can not get id directly by using this.$refs. Since this.$refs.componentName will return a vue instance, it is not a HTML DOM structure. Instead, you can use v-if to show a specific DOM.

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