Não consigo renderizar as ofertas com o Vue.js... Esse é o código da home.html das ofertas:
<html>
<head th:replace="~{base :: head}"></head>
<!-- quando o body todo for carregado a função onload será chamada-->
<body onload="onLoad()">
<div th:replace="~{base::logo}"></div>
<div class="container" id="ofertas">
<div class="jumbotron mt-3 mb-0 p-2 mb-3 bg-primary text-black"
style="-bs-bg-opacity: .8;">
<h1 class="display-5">Faça sua Oferta</h1>
</div>
<!-- percorre a lista de pedidos -->
<div class="card mb-3" v-for="pedido in pedidos">
<div class="card-header alert alert-info" style="-bs-bg-opacity: .4">
{{pedido.nomeProduto}}</div>
<div class="card-body">
<!-- #row Junta as colunas na mesma linha -->
<div class="row">
<!-- Infos do pedido -->
<div class="col-12 col-sm-8 mb-3">
<!-- Valor e data de entrega -->
<!-- #row Junta as colunas na mesma linha -->
<div class="row">
<div class="col-md-5">
Valor: <input />
</div>
<div class="col-md-7">
Data da entrega: <input />
</div>
</div>
<div>Produto</div>
<div>
<a><input v-bind:href="pedido.urlDoProduto"/>{{pedido.nomeProduto}}</a>
</div>
<div>Descrição</div>
<div>
<textarea class="form-control">{{pedido.descricao}}</textarea>
</div>
</div>
<!-- Imagem do pedido -->
<div class="col-12 col-sm-4">
<div>
<img class="img-thumbnail" v-bind:src="pedido.urlDaImagem"/>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function onLoad() {
var app = new Vue(
{
el : '#ofertas',
data : {
//o array pode ter até 10 itens
pedidos : []
},
mounted () {
axios
.get('https://localhos:8080/api/pedidos/aguardando')
.then(response => (this.pedidos = response.data))
}
});
}
</script>
<!-- importação do Vue.JS -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</body>
</html>