Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Página "faça sua oferta" está vazia.

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>
2 respostas
solução!

já solucionei o problema

Qual foi a sua solução?