In the code pen I have two buttons. One Vuetify and the other not. both should call the updateData() function but only the Vuetify component is able to run it succesfully. How can I call the method defined in the component from outside the app div?
0
votes
Any specific reason on why you don't want to place the button just inside your app-div and use @click?
- discolor
I am trying to migrate an old app and would rather do it in steps instead of just changing everything. I know it's a really weird problem, haha sorry.
- entropy283
1 Answers
0
votes
You are trying to trigger updateData method, which is accessible only inside the HTML element that Vue is mounted on. I assume you are mounting Vue to the element with id="app".
You have to put the button inside the <div id="app">:
<div id="app">
<button @click="updateData()">Button</button>
...
Or, if you don't need to access any Vue properties, you can just create a function inside script and trigger it with onclick event. Keep in mind that @click is also not accessible outside of Vue:
<button onclick="updateData()">Button</button>
<div id="app">
...
<script>
function updateData() {
console.log('test')
}
</script>
