Quando armazeno uma oferta no banco de dados, mais nenhum produto aparece na página Faça sua oferta, mas o layout da página aparece.
Erro apresentado no console do navegador (http://localhost:8080/oferta): Uncaught (in promise) TypeError: response.data.forEach is not a function at oferta:89
Código da oferta/home.html:
<!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('Faça sua Oferta')}"></div>
<div class="card mb-3 mt-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>Produto:</div>
<div> <a v-bind:href="pedido.urlProduto">{{pedido.nomeProduto}}</a></div>
<div>Descrição:</div>
<div>
<textarea class="form-control" disabled>{{pedido.descricao}}</textarea>
</div>
<div class="row mt-3">
<div class="col-md-5">Valor: <input class="form-control" v-model="pedido.valorNegociado"/> </div>
<div class="col-md-7">Data da entrega: <input class="form-control" v-model="pedido.dataDaEntrega"/> </div>
</div>
<div class="mt-2">
<label for="comentario">Comentário:</label>
<textarea id="comentario" class="form-control mt-2" v-model="pedido.comentario"></textarea>
</div>
<button v-if="pedido.ofertaEnviada" class="btn btn-success mt-2">Oferta Enviada</button>
<button v-else v-on:click="enviarOferta(pedido)" class="btn btn-primary mt-2">Enviar Oferta</button>
</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: []
},
mounted() {
axios
.get("http://localhost:8080/api/pedidos/aguardando")
.then(response => {
response.data.forEach(pedido => pedido.ofertaEnviada = false)
this.pedidos = response.data
})
},
methods: {
enviarOferta: function (pedido) {
axios
.post('http://localhost:8080/api/ofertas', {
pedidoId: pedido.id,
valor: pedido.valorNegociado,
dataDaEntrega: pedido.dataDaEntrega,
comentario: pedido.comentario
})
.then(response => pedido.ofertaEnviada = true)
}
}
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>
Classe PedidosRest:
package br.com.alura.mvc.mudi.api;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.domain.PageRequest;
import org.springframework.data.domain.Sort;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import br.com.alura.mvc.mudi.model.Pedido;
import br.com.alura.mvc.mudi.model.StatusPedido;
import br.com.alura.mvc.mudi.repository.PedidoRepository;
@RestController
@RequestMapping("/api/pedidos")
public class PedidosRest {
@Autowired
private PedidoRepository pedidoRepository;
@GetMapping("/aguardando")
public List<Pedido> getPedidosAguardando(){
Sort sort = Sort.by("id").descending();
PageRequest paginacao = PageRequest.of(0, 10, sort);
return pedidoRepository.findByStatus(StatusPedido.AGUARDANDO, paginacao);
}
}