<!DOCTYPE html>
<html>
<head th:replace="~{base :: head}"></head>
<body onload="onLoad()">
<div th:replace="~{base :: logo}"></div>
<div class="container" id="ofertas">
<div th:replace="~{base :: titulo('Últimos Pedidos')}"></div>
<div class="card-header mb-3" v-for="pedido in pedidos">
<div class="card-header">{{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 class="form-control" v-bind:href="pedido.urlProduto"> {{pedido.nomeProduto}} </a>
</div>
<div> Descrição </div>
<div>
<textarea class="form-control"> {{pedido.descricao}} </textarea>
</div>
</div>
<div class="col-12 col-sm-4">
<div>
<img class="img-thumbnail" v-bind:src="${pedido.urlImagem}" />
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function onLoad() {
var app = new Vue(
{
el : '#ofertas',
data : {
pedidos : [ {
"nomeProduto" : "Apple iPad Wi-Fi ",
"valorNegociado" : 5000,
"dataDaEntrega" : "2023-05-02",
"urlProduto" : "https://www.amazon.com.br/Apple-iPad-Wi-Fi-polegadas-64-GB/dp/B09M17SKFN/ref=sr_1_5?__mk_pt_BR=%C3%85M%C3%85%C5%BD%C3%95%C3%91&crid=11YZIJN4Y2KJY&keywords=ipad&qid=1678737272&sprefix=i%2Caps%2C1006&sr=8-5&ufe=app_do%3Aamzn1.fos.25548f35-0de7-44b3-b28e-0f56f3f96147",
"urlImagem" : "https://img.olx.com.br/thumbs256x256/24/245271821820276.jpg",
"descricao" : "10,2 polegadas (Wi-Fi, 64 GB) - Prateado",
"status" : "AGUARDANDO"
}
]
}
})
}
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
# </html>Carrega apenas parte do código, conforme imagem abaixo.
)