[Vuejs]-Show and hide a div in safari using vue js issue

by

2👍

✅

As mentioned by @ceejayoz in comments, you are supposed to let Vue.js handle the class and style bindings. Also you should not mix jQuery and Vue extensively.

In this specific case, you do not need a lot of code, classes or bindings. Here is something that works (in Safari also):

<div>
    <span @mouseover="displayHelloWorld=true" @mouseLeave="displayHelloWorld=false">
       <h5>Your title</h5>
    </span>

    <div class="bubble" v-show="displayHelloWorld">
        <h1>Hello world</h1>
    </div>
</div>

and your Vue instance (no methods needed here!):

new Vue({
    el: '#app',
    data: function() {
        return {
            displayHelloWorld: false
        }
    }
})

Stop using jQuery, and you will discover new design patterns using Vue.js 🙂

👤Mani

Leave a comment