[Vuejs]-How to show inputbox while hover some element in Vuejs 2.0

by

0👍

Here is a working example of what I think you are asking for.
Plunker

<body>
<div id="app">
    <p @mouseover="mouseOver" v-show="!active"> {{message}}</p>
    <div v-show="active" @mouseleave="mouseOut">
    <input v-model="message" placeholder="edit me">
    </div>
</div>
<script>
 new Vue({
            el: "#app",
            data: {
                message: "Message can be shown here",
                active:false,
            },
            methods: {
                mouseOver: function(){
                    this.active = true;   

                },
                mouseOut:function(){
                this.active=false;
                }
            } 
});</script></body>

P.S. please share what you have done while asking question on stackoverflow

Leave a comment