Olá, fiz o código conforme a aula utilizando o Vue Js, mas a página não tá renderizando a minha lista em Json . Conferi a minha página "http://localhost:8080/api/pedidos/aguardando" e a lista em Json está sendo criada, ou seja a lista existe ,mas quando utilizo o axios com vue para renderizá-la não acontece nada.
segue o código HTML da minha página , que está dentro da pasta oferta:
<div th:replace="~{base::logo}"></div>
<div class="container" id="ofertas">
<div th:replace="~{base::titulo('Faça A sua Oferta')}"></div>
<div class="card mb-3" v-for = "pedido in pedidos">
<div class="card-header alert-dark mt-3" >{{pedido.nomeProduto}}</div>
<div class="card-body ">
<div class="row">
<div class="col-12 col-sm-8 mb-3">
<div>Produto</div>
<div>
<a class="form-control" v-bind:href="pedido.urlDoProduto">{{pedido.nomeProduto}}</a>
</div>
<div>Descrição:</div>
<div>
<textarea disabled="disabled" class="form-control" >{{pedido.descricao}}</textarea>
</div>
<div class="row mt-3" >
<div class="col-md-5 ">
Valor:<input v-model="pedido.valorProduto" class="form-control"/>
</div>
<div class="col-md-7 ">
Data da Entrega: <input v-model="pedido.dataDaEntrega" class="form-control"/>
</div>
<div class="mt-2 mb-2">
<label class="form-label" > Comentário </label>
<textarea class="form-control"v-model="pedido.comentario"></textarea>
</div>
<div>
<button v-on:click="enviarOferta(pedido)" class="btn btn-primary" >Enviar Oferta</button>
</div>
</div>
</div>
<div class="col-12 col-sm-4">
<div>
<img class="img-thumbnail" v-bind:src="pedido.urlImagemProduto"/>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function onLoad(){
var app = new Vue({
el:'#ofertas',
data:{
pedidos:[]
},
mounted(){
axios
.get('http://localhost:8080/api/pedidos/aguardando')
.then(response =>(this.pedidos.data))
},
methods: {
enviarOferta: function(pedido){
console.log(pedido);
}
}
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>