How to Render Data to the DOM using vue-cli - templates

Question

I have created a template:
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
data() {
return {
isShowing: false
}
},
methods: {
toggleShow: function() {
this.isShowing = !this.isShowing;
setTimeout(() => {
this.toggleShow1();
}, 800);
}
}
<script>
<style>
..
</style>
And in the HTML document i'd like to toggle a heading only when isShowing is set to true:
<div v-if="isShowing">
<div>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
</div>
But then i get this error: ReferenceError: isShowing is not defined
Any help would be much appreciated. Thanks!

Answer 1

You're using a data of vue instance outside of itself. isShowing can only be used inside the <template> of the same .vue file.
For example:
<template>
<div>
<div v-if="isShowing">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
isShowing: false
}
},
methods: {
toggleShow: function() {
this.isShowing = !this.isShowing;
setTimeout(() => {
this.toggleShow1();
}, 800);
}
}
<script>
<style>
..
</style>