JavaScriptで初心者が入門としてやったこと2

JavaScriptvue.js

広告

前回のjavaScripで初心者が入門としてやったこと１（事前準備）はこちら

vue.jsでマウスオーバー時にメニューを表示させたい

前回から一部のHTMLファイルとCSSファイルの変更がありました。

sample.html

<html>
<head>
<script src="../node_modules/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="sample.css">
<script src="sample.js"></script>

</head>
<body>
  <div id =header >
    <div id =login-area>
      <div id =login @mouseenter="show_menu" @mouseleave="hidden_menu">
      </div>
      <div v-if="status" id =login-menu @mouseenter="show_menu" @mouseleave="hidden_menu"></div>
  </div>
  </div>
</body>
</html>

sample.css

#header {
  width: 100%;
height: 50px;
background-color: burlywood;
}
#login-area{
  width: 150px;
height: 200px;
position: relative;
left: 85%;
}
#login-menu{
  background-color: indigo;
width: 200px;
height: 150px;
position: absolute;
top: 50px;
}
#login{
  width: 50px;
height: 50px;
background-color: cadetblue;
position: relative;
left: 90%;
}

今回作りたいもの

ヘッダー上に、ログイン時に表示されると想定されるdiv上にマウスを重ねた時にログアウトのリンク等を含むメニューのdivを表示させたいというものです。今回は、初めてvue.jsを使って実装になるのでかなり苦労しそうです。
現段階の実装段階で、v-ifという条件レンダーというvue.jsの機能を使って非表示にしている状態です。しかし、マウスをクリック重ねた時にイベントが発火せずに、色々調べている段階です。その時のコードを載せておこうと思います。

イベントが発火しないコード

window.addEventListener("DOMContentLoaded",function(event){
mouseover();
function mouseover (){
var login =new Vue({
  el: '#login-menu',
  data: {
    status:false
  },
  methods: {
    show_menu: function(){
      this.status=true;
    },
    hidden_menu: function(){
      this.status=false;
    }
  }
})
}
});

かなり調べることで時間をかけてしまいましたが、こちらの解決もできるようにしていきたいと思います。

広告

JavaScriptvue.js