'Button click event is not working using Vue.js framework

I have two files. One html file which defines a button and the implementation of button event in another javascript file using Vue.js framework. The idea of this example is when I press the button, the alert window should be shown.

index.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8"/> 
        </head>
        <body>
                <div id="app" class="container-fluid">
                    <div class="row">
                      <div class="col-10">
                         <p><input type="button" value="Test DB" v-on:click="testDB()"> <span v-html="message_db"></span></p>
                      </div>                    
                    </div>
                </div>
            <script src="https://unpkg.com/vue"></script>
            <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
            <script src="js/main.js"></script>
        </body>
    </html>

main.js

var app = new Vue({
    el: '#app',
    data: {
        message_db: ''
    },

    methods:{
        testDB: function(){
            alert("Hello");
            
        }
    }

});

The browser console shows the following messages at loading the web page:

[email protected]:7 Uncaught TypeError: window.Vue.use is not a function
    at [email protected]:7:15152
    at [email protected]:7:150
    at [email protected]:7:154
(anonymous) @ [email protected]:7
(anonymous) @ [email protected]:7
(anonymous) @ [email protected]:7
main.js:1 Uncaught TypeError: Vue is not a constructor
at main.js:1:12

What is missing in this case?

javascripthtmlvue.jsvuejs2


Solution 1:[1]

I made the following corrections and it started to work:

index.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8"/> 
        </head>
        <body>
                <div id="app" class="container-fluid">
                    <div class="row">
                      <div class="col-10">
                         <p><input type="button" value="Test DB" v-on:click="testDB"> <span v-html="message_db"></span></p>
                      </div>                    
                    </div>
                </div>
            <script src="js/vue.min.js"></script>
            <script src="js/main.js"></script>
        </body>
    </html>

I updated script src tags. The order of script tags is important. Vue.min.js refers to v2.3.0. I think https://unpkg.com/vue returns the last vesion de vue.js About main.js file keeps the same content.

Sources

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

Source: Stack Overflow

Solution Source
Solution 1

Related Questions