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

v-on:click não funciona

Ao clicar no botão "Enviar oferta" nada acontece. Achei que poderia ser o meu html, então baixei o projeto da aula e também não funciona. O que pode ser?

home.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('Ofertas')}"></div>
        <div class="card mb-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 class="mt-2">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 class="form-control"
                                    v-model="pedido.valorNegociado" />
                            </div>
                            <div class="col-md-7">
                                Data de Entrega: <input class="form-control"
                                    v-model="pedido.dataDaEntrega" />
                            </div>
                        </div>
                        <div class="mt-2">
                            <label>Comentário</label>
                            <textarea class="form-control" 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" id="enviarOferta">Enviar
                            Oferta</button>
                    </div>
                    <div class="col-12 col-sm-4">
                        <div>
                            <img class="img-thumbnail" style="height: 250px"
                                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 => console.log(response))
                            }
                        }
                    });
        }
    </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>

OfertasRest.java

package br.com.alura.mvc.mudi.api;

import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import br.com.alura.mvc.mudi.dto.RequisicaoNovaOferta;
import br.com.alura.mvc.mudi.model.Oferta;
import br.com.alura.mvc.mudi.model.Pedido;
import br.com.alura.mvc.mudi.repository.PedidoRepository;

@RestController
@RequestMapping("/api/ofertas")
public class OfertasRest {

    @Autowired
    private PedidoRepository pedidoRepository;

    @PostMapping
    public Oferta criaOferta(@RequestBody RequisicaoNovaOferta requisicao) {

        Optional<Pedido> pedidoBuscado = pedidoRepository.findById(requisicao.getPedidoId());

        if (!pedidoBuscado.isPresent()) {
            return null;
        }

        Pedido pedido = pedidoBuscado.get();

        Oferta nova = requisicao.toOferta();
        nova.setPedido(pedido);
        pedido.getOfertas().add(nova);
        pedidoRepository.save(pedido);

        return nova;
    }
}
9 respostas

Opa fala ai Guilherme suave? o problema está no seu back end, no seu controller, no seu front end vc está chamando o método enviarOferta .

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 => console.log(response))
                            }
                        }

já no seu controller está com o nome criarOferta

public Oferta criaOferta(@RequestBody RequisicaoNovaOferta requisicao) {

mude o nome do seu metodo do controller para enviarOferta.

Blz Flávio? Eu até mudei o nome do método mas não funcionou, acredito que o problema está no vue mesmo. Na própria aula o método é criado como criaOferta no controller e enviarOferta no html, e funciona normalmente. Fazendo uns testes usando o exemplo do guide do Vue.js, consegui criar um outro botão que chama um método que inverte uma string na tela, mas ainda não consegui implementar isso no projeto.

Pelo que eu entendi, teria que ser criado uma outra variável somente para o botão, referenciando pelo Id, segue o exemplo:

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Fonte: https://vuejs.org/v2/guide/

Opa fala, nao acredito que seja isso não, seu codigo está correto, acredito que seu codigo esteja caindo no if então.

coloca um sysou dentro do if para dar uma analisada se está caindo ali.

 if (!pedidoBuscado.isPresent()) {
    deve estar caindo aqui dentro, coloca uma mensagem pra ver.
    system.out.println("caiu aqui");
            return null;
        }

Flávio, inclui a mensagem no IF mas não funcionou. Parece que é o on:click que não está sendo executado mesmo.

Que estranho, quando vc ve o console do navegador aparece oque? vi que vc coloca um console.log para debugar ali né.

.then(response => console.log(response))

no seu navegador aperece o response?

Não aparece nada no console, é como se o click do botão não estivesse sendo executado mesmo

Então realmente o botão não está sendo executado a função, tente tirar o id do seu button.

<button v-else v-on:click="enviarOferta(pedido)"
                            class="btn btn-primary mt-2" id="enviarOferta">Enviar
                            Oferta</button>

deixando assim pra ver.

<button v-else v-on:click="enviarOferta(pedido)"
                            class="btn btn-primary mt-2">Enviar
                            Oferta</button>
solução!

Obrigado pela ajuda Flávio, acabei descobrindo. No final das contas era o mesmo problema da resposta do Rafael desse post https://cursos.alura.com.br/forum/topico-erro-403-em-novas-ofertas-139308