Vue

How To Render Component if some condition is true

<template>
  <h2>New component</h2>
</template>

<script>
export default {
    name:'new-component',
    data() {
        return {
            is_match:false,
        }
    },
    created () {
        this.new();
    },
    methods: {
        new(){
            if(this.is_match == 'true'){
                //reload this component data
            }
        }
    },

}

CamKem

3 years ago

Level 10

<script setup>
Import {ref} from “Vue”;
Import Component from “@/components/Component.Vue”;
let trigger = ref(false);
</script>

<template>
<button @click=“trigger = ! trigger”>Toggle component</button>
<Component v-if=“trigger” />
</template>

Please or to participate in this conversation.