Check if props in vue.js component template exists

Question

After tried many variations, I don't know how to properly style a component's slot or partial code within section.

Is there a way to check if props from parent level exists, so in a Counter.vue in section i would show a special html markup for it ?

=== UPDATED ===

Vue.component('counter', {
 template: `

 
   since VARTIME
  

  `,
  data: function(){
   return{
     count: this.number + 1
    }
  },
  props: {
   number: Number,
    recent: {
     type: Boolean,
      default: false
    }
  },
  computed: {
   
  },
  created(){
   if( this.recent === true ){
     console.log('mounted recent true');
    }
  }
});

new Vue({
 el: "#app",
  
  data: {
   count: ''
  }
});

user_590373 · Answer

Here the default value for the recent will be false and if the recent is passed from the parent it will get set in the child.

Just use the detailed props definition as mentioned here.

Remove the v-text="number" as it overrides the internal content of the span and therefore the v-if will never executes.

This is a working example

Vue.component('counter', {
  template: `
    
       since VARTIME 
    
  `,
  data: function() {
    return {
        count: this.number + 1    
    }
  },
  props: {
    number: Number,
    recent: {
      type: Boolean,
      default: false
    }
  },
  computed: {},
  created() {
    if ( this.recent === true ) {
        console.log('mounted recent true');
    }
  }
});

new Vue({
  el: "#app",
  data: {
    count: ''
  }
});

user_1542723 · Answer

You should add a condition class binding, that you eventually style from css/sass/stylus/less.

This can be done as follows:

Notice that vuejs will automatically combine multiple class declarations on the same element without problems, as described in the manual.

Check if props in vue.js component template exists

2 Answers