When testing the accessibility of Vue event binding to instance state/data, I encountered an issue. I attempted passing msg (instance data) into an anonymous function which then calls alertMsg(msg) (an instance method). However, it appears that only the default event object (in this case, a Mouse event) is being passed to alertMsg(msg), and not msg itself.
I even tried using (ev, msg), meaning I pass both ev (the event object) and msg as the second argument, but still only the event object is being passed.
Template
<div id="app">
<p>{{ msg }}</p>
<div @click="msg => { alertMsg(msg)}">test</div>
</div>
Vue Instance
new Vue({
el: '#app',
data() {
return {
msg: 'Hello World'
}
},
methods: {
alertMsg(e, msg) {
console.log(e)
alert(msg)
}
}
})
Any suggestions on how to solve this issue would be greatly appreciated.
Thank you!