Bom dia! Quando coloco apenas response, o código funciona normal conforme o professor mostrou no vídeo, mas ao colocar response.data, não carrega o card do bootstrap, não consigo usar o F12 para ver o erro e logo em seguida a tela fica escura e aparece um erro: Código de erro: Out of Memory. No console só fala sobre a biblioteca jackson-databind-2.11.4.jar:2.11.4 e mais nada, sem erros.
Segue meu código:
<!DOCTYPE html>
<html lang="pt-br">
<head th:replace="~{base :: head('Ofertas | Mudi')}"></head>
<body onload="onLoad()">
<div th:replace="~{base :: logo}"></div>
<div class="container" id="ofertas">
<div
th:replace="~{base :: titulo('Vamos negociar? Faça sua oferta.')}"></div>
<div class="card mb-3" v-for="pedido in pedidos">
<div class="card-header alert-dark">{{pedido.nomeProduto}}</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-sm-8 mb-3">
<div class="row">
<div class="col-md-5">
Valor: <input />
</div>
<div class="col-md-7">
Data de entrega: <input />
</div>
</div>
<div>Produto</div>
<div>
<a v-bind:href="pedido.urlProduto">{{pedido.nomeProduto}}</a>
</div>
<div>Descrição</div>
<div>
<textarea class="form-control" rows="" cols="">{{pedido.descricao}}</textarea>
</div>
</div>
<div class="col-12 col-sm-4">
<div>
<img class="img-thumbnail" v-bind:src="pedido.urlImagem" alt=""
src="" />
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function onLoad() {
new Vue({
el: '#ofertas',
data () {
return {
pedidos : []
}
},
mounted () {
axios
.get('http://localhost:8080/api/pedidos/ofertas')
.then(response => (this.pedidos = response.data))
.catch(error => console.log(error))
}
});
}
</script>
<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>
