Vue JS click event not firing up - vue.js

Question

I'm developing app where I have a dynamic .ddlist for each .box.
<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 #click.prevent="myalert()" v-for="item in hello">{{item.text}}</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 #click.prevent="myalert()" v-for="item in there">{{item.text}}</li>
</ul>
</div>
</div>
What I want to achieve is when user focus on input, very next .ddlist should be visible. Here is Javascript part :
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");
},
}
})
My code is working fine until here and .ddlist does show up on focusing on input
What Next I want to do is When a user clicks on .ddlist child a, It should fire #click event binded to it.
There is a problem. Now when user clicks on a nothing shows up.
What I notice is because I'm toggling with css display:block/none of .ddlist, #click event is not firing up.
Here is the working fiddle : https://jsfiddle.net/6y9mwh3u/
May be you can throw some light on achieving my result with alternative ?

Answer 1

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">{{item.text}}</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">{{item.text}}</li>
</ul>
</div>
</div>