I recently started learning Vue.js and I'm having some difficulty with my coding exercises:
The task is to have a menu button that opens a dropdown box when clicked, and when any selection is made, it should go back to the menu button.
index.js
const vm = new Vue({
el: '#root',
data: () => {
{return {menuClick: true}}
},
methods: {
methodClick(e){
console.log(event.target.value)
}
},
template: `
<div @click="methodClick">
<a class='dropdown-button btn' href='#' v-if="methodClick">Open</a>
<ul class='dropdown-content'v-else="!methodClick">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
</div>
`
});
index.html
<!--Don't edit this! Change to the index.js file (click on the link on the left side) and edit that file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<style>.dropdown-content{ display: block !important; opacity: 1 !important; }</style>
<div id="root">
</div>
<!--Don't edit this! Change to the index.js file (click on the link on the left side) and edit that file-->
Upon console logging, I keep getting an "undefined" message.