0👍
You can just call two methods in one handler, like that
<NavigationBar v-on:click="pauseMethod(); resumeMethod();" />
Or you can create another helper method
<NavigationBar v-on:click="handleClick" />
...
methods: {
handleClick() {
this.resumeMethod()
this.pauseMethod()
}
}
0👍
You can’t do this in Vue.
You can use $emit
to achieve this:
Vue.component("NavigationBar", {
template: `
<ul>
<li @click="pause">Field</li>
<li @click="resume">Statistics</li>
</ul>`,
methods: {
pause() {
this.$emit('pause');
},
resume() {
this.$emit('resume');
},
}
});
Vue.component("wrapper", {
template: `<NavigationBar @pause="onPause" @resume="onResume" />`,
methods: {
onPause() {
// Do stuff
console.log('Paused');
},
onResume() {
// Do stuff
console.log('Resumed');
}
}
});
new Vue({
el: "#app"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<wrapper/>
</div>
0👍
Thank you guys. I found a solution. Check it out !
-
Parent Component
<template>
<Navigation v-on:click="myMethod"/>
</template><script>
name:'ParentElement',
data(){
somethig:true;
},
methods:{
myMethod(result){
this.somethis=result;
}
}
</script> -
Child Element
<ul>
<li @click="$emit('click',false)">Fields</li>
<li @click="$emit('click',true)">Statistics</li>
</ul>
Source:stackexchange.com