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);
}
}
});
}