'How to call vuetify method from script in html (Vuetify CDN)

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/vue.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
javascripthtmlmethodsvuetify.jscdn


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions