Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

VueResource não esta considerando o parâmetro na url

Referente ao curso Vue.js parte 2: construindo Single Page Applications

por Vitor Silva Delfino
| 129k xp | 18 posts
Estagiario

Olhei na documentação como criar um customResource, porém ao executa o metodo o parâmetro "id" não esta sendo passado

AgendamentoService

export default class AgendamentoService {

  constructor(resource){

    let customActions = {
      confirmar: {method: 'PUT', url: 'agendamento/confirma{/id}'},
      finalizar: {method: 'PUT', url: 'agendamento/finalizar{/id}'},
      cancelar: {method: 'DELETE', url: 'agendamento/cancelar{/id}{/obs}'}
    };

    this._resource = resource('agendamento/list',{}, customActions);
  }
  confirmar(agendamento){
    var id = agendamento.id;
    return this._resource
    .confirmar({ id })
    .then(null, erro => {
      console.log(erro);
      throw new Error('Não foi possível confirmar o agendamento');
    });
  }

}

log do console: PUT http://localhost:3000/agendamento/confirma 404 (Not Found) Não foi possível confirmar o agendamento

Rota no backend: 

app.put('/agendamento/confirma/:id', (req, res) => {
    ...
}
4 respostas
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Aparentemente esta tudo correto. Você esta usando uma versão diferente do Vue da do curso?

Foi essa documentação que você consultou?

https://github.com/pagekit/vue-resource/blob/develop/docs/resource.md

por Vitor Silva Delfino
| 129k xp | 18 posts
Estagiario

Chegando em casa eu verifico as versões, mas como é outro projeto deve ser as ultimas versões de todas as libs

por Vitor Silva Delfino
| 129k xp | 18 posts
Estagiario

Flávio,

Realmente não sei o que está acontecendo, eu configurei o customService no projeto do curso e funcionou normal

 constructor(resource){

        let customActions = {
            listar: { method: 'GET', url: 'v1/fotos' },
            cadastra: { method: 'POST', url: 'v1/fotos' },
            apaga: { method: 'DELETE', url: 'v1/fotos{/id}' },
            altera: { method: 'PUT', url: 'v1/fotos{/id}' }
        }

        this._resource = resource('v1/fotos{/id}', {}, customActions);
    }

Subi meus projetos no github, poderia me dar uma luz pfv ?

É um projeto pra faculdade onde eu tenho meio que comparar frameworks.

Parte Mobile (aplicação que seria usada pelos clientes): https://github.com/vitordelfino/cabeleireiro-angular

Parte Web (aplicação que seria utilizada pelo dono): https://github.com/vitordelfino/cabeleireiro-vue

backend: https://github.com/vitordelfino/cabeleireiro-api

OBS: Testando via postman Method: PUT URL:http://localhost:3000/agendamento/confirma/32 funcionou

solução!
por Vitor Silva Delfino
| 129k xp | 18 posts
Estagiario

Link com a solução do problema

https://github.com/pagekit/vue-resource/issues/556

apenas colocar "{}" após o parametro

ex:

confirmar(agendamento){
    var id = agendamento.id;
    return this._resource
    .confirmar({ id }, {}) //fix
    .then(null, erro => {
      console.log(erro);
      throw new Error('Não foi possível confirmar o agendamento');
    });
  }