vue.jsでmouseoverした時だけ表示する方法

jQueryだと、mouseoverを使うことになると思います。

ただし、vueで使用すると、mouseoverした瞬間だけ、メソッドが実行されます。

なんで、正確にmouseoverした時だけ表示する方法です。

結論から言うと、mouseenterとmouseleaveを使います。

vue.js

  const topicForm = Vue.extend({
    data: function() {
      return {
        LinkIconActive: false,
        ImageIconActive: false
      }
    },
    methods: {
      LinkIconDescriptionShow: function() {
        return this.LinkIconActive = true
      },
      LinkIconDescriptionHidden: function() {
        return this.LinkIconActive = false
      }
    }
  })

html.slim

i.fa.fa-link.@mouseenter="LinkIconDescriptionShow" @mouseleave="LinkIconDescriptionHidden"

methodsが二つ生えて、ダサいけど、こんな感じになるかと思います。

もっといい書き方があれば、教えて下さいm(_ _)m