1
resposta

v-model trás valores no banco de dados

Quando eu uso o atributo v-model em alguma parte do formulário da oferta, por exemplo no input do valorNegociado, ele acaba trasendo o valor desse campo do banco de dados.

Ou seja, no meu input onde o usuário colocará o valor já vem com o valor no banco de dados do respectivo produto, enquanto o input do instrutor vem vazio.

Isso tem algum problema? Se sim, qual a solução?

Minha parte principal home da página de oferta:

            <div class="container" id="ofertas">
                <div class="card mb-5" v-for="pedido in pedidos">
                    <div class="card-header alert-warning">
                        <h1>{{pedido.nomeProduto}}</h1>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <div class="texto col-12 col-sm-8">
                                <div class="row">
                                    <div class="col-md-5">
                                        <label for="input-valor"><p class="fw-bolder mb-0">Preço: </p></label>
                                        <input id="input-valor" class="form-control" v-model="pedido.valorNegociado"/>
                                    </div>
                                    <div class="col-md-7">
                                        <label for="dataEntrega"><p class="fw-bolder mb-0">Data de entrega: </p></label>
                                        <input id="dataEntrega" class="form-control" v-model="pedido.dataDaEntrega"/>
                                    </div>
                                </div>

                                <div>
                                    <p class="mt-3 fw-bolder">Acessar produto:
                                        <a v-bind:href="pedido.urlProduto" class="form-control">{{pedido.nomeProduto}}</a>
                                    </p>
                                </div>

                                <div>
                                    <label for="input-descricao"><p class="fw-bolder mb-0">Descrição: </p></label>
                                    <textarea id="input-descricao" class="form-control" disabled>{{pedido.descricao}}</textarea>
                                </div>

                                <div>
                                    <label for="input-comentario"><p class="fw-bolder mt-3 mb-0">Comentário: </p></label>
                                    <textarea id="input-comentario" class="form-control disabled" v-model="pedido.comentario"></textarea>
                                </div>
                            </div>

                            <div class="produto-imagem col-12 col-sm-4 mt-2">
                                <img class="img-thumbnail" v-bind:src="pedido.urlImagem"/>
                            </div>
                        </div>

                    </div>
                    <div class="card-footer">
                        <button v-on:click="enviarOferta(pedido)" class="btn btn-primary ml-3">Concluir oferta</button>
                    </div>
                </div>
            </div>
        </section>

Meu script js:

function onLoad() { var app = new Vue({ el: '#ofertas', data: { pedidos: [] }, mounted () { axios .get('http://localhost:8080/api/pedidos/aguardando') .then(response => (this.pedidos = response.data)) }, methods: { enviarOferta: function(pedido) { console.log(pedido); } } }); }

1 resposta
O post foi fechado por inatividade. Para continuar o assunto, recomendamos criar um novo tópico. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software