javascript - Check if props in vue.js component template exists - Stack Overflow

admin管理员组

文章数量:1315110

After tried many variations, I don't know how to properly style a ponent's slot or partial code within <template></template> section.

Is there a way to check if props <counter :recent="true"></counter> from parent level exists, so in a Counter.vue in section <template></template> i would show a special html markup for it ?

=== UPDATED ===

Vueponent('counter', {
	template: `
<span class="counter" :number="21" v-text="number">
	<span v-if="recent">
  	since VARTIME
  </span>
</span>
  `,
  data: function(){
  	return{
    	count: this.number + 1
    }
  },
  props: {
  	number: Number,
    recent: {
    	type: Boolean,
      default: false
    }
  },
  puted: {
  	
  },
  created(){
  	if( this.recent === true ){
    	console.log('mounted recent true');
    }
  }
});

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

<script src=".4.4/vue.min.js"></script>
<div id="app">

  <counter :number="20" :recent="true"></counter>
  
</div>

After tried many variations, I don't know how to properly style a ponent's slot or partial code within <template></template> section.

Is there a way to check if props <counter :recent="true"></counter> from parent level exists, so in a Counter.vue in section <template></template> i would show a special html markup for it ?

=== UPDATED ===

Vue.ponent('counter', {
	template: `
<span class="counter" :number="21" v-text="number">
	<span v-if="recent">
  	since VARTIME
  </span>
</span>
  `,
  data: function(){
  	return{
    	count: this.number + 1
    }
  },
  props: {
  	number: Number,
    recent: {
    	type: Boolean,
      default: false
    }
  },
  puted: {
  	
  },
  created(){
  	if( this.recent === true ){
    	console.log('mounted recent true');
    }
  }
});

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

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">

  <counter :number="20" :recent="true"></counter>
  
</div>

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Sep 20, 2017 at 8:05 aspirinemaga asked Sep 20, 2017 at 6:48 aspirinemagaaspirinemaga 3,9471111 gold badges5858 silver badges106106 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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.ponent('counter', {
  template: `
    <span class="counter" :number="21">
      <span v-if="recent"> since VARTIME </span>
    </span>
  `,
  data: function() {
    return {
        count: this.number + 1    
    }
  },
  props: {
    number: Number,
    recent: {
      type: Boolean,
      default: false
    }
  },
  puted: {},
  created() {
    if ( this.recent === true ) {
        console.log('mounted recent true');
    }
  }
});

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

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">

  <counter :number="20" :recent="true"></counter>
  
</div>

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

This can be done as follows:

<template>
    <span class="counter" v-text="count" :class="{ cssClassName: recent}">
        <slot></slot>
        <span v-if="recent">
            since VAR_DATETIME <i class="fa fa-refresh" @click="updateList"></i>
        </span>
    </span>
</template>

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

本文标签： javascriptCheck if props in vuejs component template existsStack Overflow