Делаю простенький Quote Generator. Изначально писала на js а теперь переделываю с Vue. Но почему то при нажатии на кнопку цитата не меняется. Буду благодарна если подскажете.
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/vue@2/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];
}
}
})
