0

Boa tarde, sou iniciante em VueJS e estou fazendo um formulário HTML que precisa verificar uma API externa via requisição post HTTP. Achei várias explicações na internet mas nada sucinto, gostaria de entender como posso passar a URL como parâmetro. A documentação da API é a seguinte: https://documenter.getpostman.com/view/4058085/SWDzdLAF?version=latest

Atualmente meu código está dessa forma:

import Cotacao from './services/cotacoes'

export default {

  data(){
    return {
      cotacao: {
        firstName: '',
        lastName: '',
        qtd: '',
        phone: '',
        vehicleType: '',
        vehiclePlate: '',
        totalValue: '',

      },
      cotacoes: []
    }
  },

  mounted(){
    Cotacao.listar().then(resposta => {
      console.log(resposta.data)
      this.produtos = resposta.data
    })
  },

  methods: {
    salvar(){
      Cotacao.salvar(this.cotacao).then(resposta =>{
        console.log(resposta.data)
      })
    }
  }

}

e a config da minha API está da seguinte forma, no arquivo "config.js"

import axios from 'axios'

export const http = axios.create({
    baseURL: 'https://us-central1-onsurance-new.cloudfunctions.net/quote/tires?totalValue=<number>&qtd=<number>&vehicleType=<string>&firstName=<string>&lastName=<string>&userEmail=<string>&vehiclePlate=<string>&dailyUsage=<number>&phone=<string>'
})

E no arquivo "cotacoes.js" está da seguinte forma:

import { http } from './config'

export default {

    listar:() => {
        return http.get('cotacoes')
    },

    salvar:(cotacao) => {
        return http.post('cotacao', cotacao)
    }

}

Peço desculpas por qualquer erro grotesco, sou iniciante em Vue, agradeço quem puder me ajudar!

1 Resposta 1

0

Seu código esta aparentemente correto, você testou o serviço da API pelo Postman ou semelhantes?

Fiz um exemplo bem semelhante ao seu para exemplificar e está funcionando corretamente:

api.js

import axios from "axios";

export const api = axios.create({
  baseURL: "https://jsonplaceholder.typicode.com"
});

services.js

import { api } from "./api";

export default {
  async getUsers() {
    return api.get("users");
  }
};

component.vue

import services from "./services";

export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    async getUsers() {
      const { data } = await services.getUsers();
      this.users = data;
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler: "getUsers"
    }
  }
};

Exemplo: https://codesandbox.io/s/distracted-cartwright-oe734

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .