I would like to know how to call a vuetify method from a script in html in my Vuetify application (note that it is in CDN.). I really don't know how to do it and I would like some help, thanks. There is a exemple who NOT work:
<!DOCTYPE html>
<html><head><title>My super application</title> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></head><body><div id="app"><v-app id="inspire" :dark="setTheme"><v-container fluid px-15><button onclick="test()">CLICK HERE TO DO A METHOD WITH SCRIPT HTML </button><br><br><span>METHODS_2938 is not defined :(</span><script>
function test() {
var material_gworl = false;
if(material_gworl == false) {
METHODS_2938();
// DO --> VUETIFY <-- METHOD: METHODS_2938
}
}
</script><v-spacer></v-spacer>
</v-container>
</v-app>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.4/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
<script>
new Vue({
el: "#app",
opts: {
theme: {
dark: false
}
},
vuetify: new Vuetify(this.opts),
data() {
return {
goDark: false
};
},
methods: {
// HERE
METHODS_2938() {
alert("WORKING!!");
}
},
computed: {
setTheme() {
if (this.goDark == true) {
return (this.$vuetify.theme.dark = true);
} else {
return (this.$vuetify.theme.dark = false);
}
}
}
});
</script>
</body>
</html>