[Vuejs]-Vue JS click event not firing up

by

0👍

✅

You can use mousedown event listener instead in order to execute myalert before showDDList since blur was preventing click from being called.

new Vue({
  el: "#app",
  data: {
    hello: [
      { text: "hello 1" },
      { text: "hello 2" },
      { text: "hello 3" },
      { text: "hello 4" }
    ],
    there: [
      { text: "there 1" },
      { text: "there 2" },
      { text: "there 3" },
      { text: "there 4" }
    ]
  },
  methods: {
  	showDDList: function(e) {
			e.target.nextElementSibling.classList.toggle('active');
		},
    myalert: function() {
			alert("Hello world");
		},
    
  }
})
.box {
  display: block;
  padding: 10px;
  margin: 10px;
  border: 1px #ddd solid;
}
.ddlist {
  display: none;
  margin-top : 10px;
}
.ddlist.active {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>MY LIST</h2>
  
  <div class="box">
    <input v-on:focus="showDDList" v-on:blur="showDDList" type="text" value="" placeholder="hello list">
    <ul class="ddlist">
      <li @mousedown.prevent="myalert" v-for="item in hello"><a href="">{{item.text}}</a></li>
    </ul>
  </div>
 
 <div class="box">
    <input v-on:focus="showDDList" v-on:blur="showDDList" type="text" value="" placeholder="there list">
    <ul class="ddlist">
      <li @mousedown.prevent="myalert" v-for="item in there"><a href="">{{item.text}}</a></li>
    </ul>
  </div>
  
</div>

Leave a comment