Vue.js转换在Laravel Blade + Sass中不起作用

Question

My Google search didn't come up with any answer to is this expected behavior or am I doing something wrong.

My HTML:

<a v-on:click="showInformation = !showInformation">Show / Hide</a>
<transition name="fade">
    <p class='further-info' v-if="!showInformation">Lorem ipsum dolor.</p>
</transition>

EDIT: Just found out that it works like this:

<transition name="fade">
    <div v-if="!showInformation">
        <p class='further-info'>Lorem ipsum dolor</p>
    </div>
</transition>

This is not documented in the Vue.js documentation and it's clearly shown that it should work as the first example. Is this expected in my case?

My SASS:

.fade-enter-active, .fade-leave-active
    transition: opacity .5s

.fade-enter, .fade-leave-to
    opacity: 0

Pretty straight forward, but I may be doing something wrong. Whenever I click the button the p shows and hides correctly, but without any transition effect.

Using:

Laravel 5.7.9
Vue.js 2.9.6 (with ES6)
Sass 1.14.2 (but not relevant since it complies the transition code correctly)
The HTML file is written a blade template file

Answer 1

You should change the v-if to a v-show. This way the element exists in the page even though it's not displayed.