In my App.vue file, I have the following setup:
<template>
<div id="app">
<input type="text" v-model="term">
<hello-world text="Button 1" v-if="term === ''"></hello-world>
<hello-world v-else text="Button 2"></hello-world>
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld'
export default {
name: 'app',
data() {
return {
term: ''
}
},
components: {
HelloWorld
}
}
</script>
And here is the content of HelloWorld.vue:
<template>
<div>
<button>{{ text }}</button>
</div>
</template>
<script>
export default {
props: {
text: String
},
created() {
console.log('Created')
},
destroyed() {
console.log('Destroyed')
}
}
</script>
However, when I input text, the expected behavior does not occur. The component is neither destroyed nor created as expected by the v-if condition. Can someone provide assistance with this issue? Thank you.