I have been diving into learning vue.js by referencing the documentation available on Vue.js Reference Doc.
Following the examples provided, I encountered an issue with the example in the conditional part.
Here is the code snippet that didn't work for me:
<template id="app-3">
<div v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</template>
<script src="vue.js"></script>
<script>
var app = new Vue({
el : '#app-3',
data : {
ok : true
}
});
</script>
The above code did not work as expected.
However, when I tried this alternative version of the code below, it worked fine:
<transition id="app-3">
<template v-if="ok">
<div>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
</template>
</transition>
<script src="vue.js"></script>
<script>
var app = new Vue({
el : '#app-3',
data : {
ok : true
}
});
</script>
I am curious to understand why the first code snippet didn't behave as expected!