CODEWITHSUNDEEP
vue.jstemplates
Ali Batuhan Bayraktar
Ali Batuhan Bayraktar

Reputation: 55

How Can I Call Template in Same Component on Vue

My problem is, there are a few templates on a component. And I want to call on same component. For example:

<template>
  <div>
    [I WANT TO USE FIRST TEMPLATE]
  </div>


  <template>First</template> //First Template
  <template>Second</template> //Second Template
</template>

Upvotes: 1

Views: 849

Answers (2)

Venkatesh A
Venkatesh A

Reputation: 2474

Ihsan Fajar Ramadhan's answer is one way of doing it. But, there is another better way of conditional rendering of components like below:

<template>
    <div>
        <button v-on:click="setSelected('comp1')">Comp1</button>
        <button v-on:click="setSelected('comp2')">Comp2</button>    
        <component :is="selected"></component>
    </div>
</template>

<script>
import comp1 from './comp1.vue';
import comp2 from './comp2.vue';
export default { 
    components : {
        'comp1' : comp1,
        'comp2' : comp2
    },
    data(){
        return {
            selected : 'comp1'
    },
    methods: {
        setSelected(tab){
            this.selected = tab;
        }
    }
}
</script>

Upvotes: 1

Ihsan Fajar Ramadhan
Ihsan Fajar Ramadhan

Reputation: 1033

if you want to render them conditionally, you can use v-if directive. for the example:

<template>
  <div>
    [I WANT TO USE FIRST TEMPLATE]
  </div>


  <template v-if="fistCondition">First</template> //First Template
  <template v-else>Second</template> //Second Template
</template>

or

<template>
  <div>
    [I WANT TO USE FIRST TEMPLATE]
  </div>


  <template v-if="fistCondition">First</template> //First Template
  <template v-else-if="secondCondition">Second</template> //Second Template
</template>

Upvotes: 0

Related Questions