When running the following code in jsfiddle, there are no issues. However, when attempting to run it on localhost, the ready function does not fire and the ordered list items are not displayed. How can this be resolved?
index.html
<body>
<h3>Notícias</h3>
<div id="app">
<ol>
<li v-for="noticia in noticias">
<span>{{ noticia.id }}</span>
<span>{{ noticia.titulo }}</span>
<span>{{ noticia.data_inicio }}</span>
</li>
</ol>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="app.js"></script>
</body>
app.js
var noticias = [
{
"id": 1,
"titulo": "Lorem ipsum",
"conteudo": "Lorem ipsum sit dolor amet",
"data_inicio": "1990-12-06",
"data_fim": "1990-12-07"
},
{
"id": 2,
"titulo": "Lorem ipsum sit",
"conteudo": "Lorem ipsum sit dolor amet",
"data_inicio": "1998-12-06",
"data_fim": "1998-12-10"
}
];
var app = new Vue({
el: '#app',
data: {
noticias: []
},
ready: function() {
this.$set('noticias', noticias);
},
});
The files index.html and app.js are located in the same directory.