<script type="text/x-template" id="handle-click">
<ul>
<li v-for="(entry, index) in menu" :key="index" @click="selectEntry(entry)"> {{entry}}</li>
</ul>
</script>
<div id="app">
<my-button />
</div>
Vue.component('my-button', {
template: '#handle-click',
name: 'SingleComponent',
data () {
return {
menu: ['tacos','hot dogs', 'ice cream']
}
},
methods: {
selectEntry (value) {
alert(`${value} it is!`)
}
}
})
let app = new Vue({
el: '#app'
})
View Compiled
This Pen doesn't use any external CSS resources.