Why doesn't v-on:click work?

V

Vladislava2022-01-05 13:40:24

JavaScript

Vladislava, 2022-01-05 13:40:24

I'm making a simple Quote Generator. Initially I wrote in js and now I'm redoing it with Vue. But for some reason, when you click on the button, the quote does not change. I would be grateful if you could advise.
html

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Quote Genenerator</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-slate-200">
<div class="container">
   
<div class="main__inner">
    <h1>Quote Generator</h1>
    <div id="quoteDisplay">
        {{ item }}
    </div><br>
    <button class="rounded bg-slate-700 p-1.5" style="color: #fff;" v-on:click="newQuote">Get quote</button>
</div>   
</div> 
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script src="main.js"></script>   
</body>
</html>

JS

new Vue({
    el: '#quoteDisplay',
    data:{
        item: '',
        quotes: ["Live as if you were to die tomorrow. Learn as if you were to live forever.", "That which does not kill us makes us stronger.",
        "We must not allow other people's limited perceptions to define us.", "Do what you can, with what you have, where you are.", "Be yourself; everyone else is already taken.", "If you cannot do great things, do small things in a great way."],
        random: 0,
    },
    methods: {
        newQuote: function(){
            this.random = Math.floor(Math.random() * this.quotes.length);
            
            this.item = this.quotes[this.random];
        }
    }
})