Vue Js Axios get method

Question

I use vue.js and I try to set a parameter id in axios.get request and I can't understand how exactly to do it

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Movie from './views/Movie.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/movie/:m_id',
      name: 'movie',
      component: Movie
    }
  ]
})

import Navbar from '../components/Navbar'
import axios from "axios"

export default {
     components:{
        Navbar
      },
      data () {
    return {
      movi: null,
    }
    },
 mounted () {
    axios
      .get(`https://api.themoviedb.org/3/movie/${m_id}?api_key=7bc75e1ed95b84e912176b719cdeeff9&language=en-US`)
      .then(response => (this.movi= response.data))
  }
}

I am trying to pass to axios this id of the page to get information about that specific movie and I got stuck. Any help?

Is your m_id defined? Console.log it because it looks like you should define a prop called m_id in your component. Futhermore, you should access this variable with this.m_id — Matheus Valenza
– Matheus Valenza, Commented Mar 12, 2019 at 19:08

Flame · Accepted Answer · 2019-03-12 20:39:13Z

1

You can try this to use your params from the URL:

// Retrieve the `m_id` param from the `this.$route.params` object:
this.$route.params.m_id

For more info see https://router.vuejs.org/api/#route-object-properties

answered Mar 12, 2019 at 20:39

Flame

7,7563 gold badges43 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

markus vranceanu Over a year ago

How can I do the same thing but in store.js.

Flame Over a year ago

I dont know store.js , you could create a new question or search around on the web

markus vranceanu Over a year ago

maybe you got me wrong, I mean to implement the same thing but using Vuex , in vuex I can't access the router-id same like in a vue component

markus vranceanu · Accepted Answer · 2019-03-14 15:49:55Z

#How can I do the same thing but in Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import Axios from 'axios';
import router from './router'

Vue.use(Vuex)
Vue.use(Axios)
Vue.use(router)

export default new Vuex.Store({
  // data() {
  //   return {
  //     m_id:this.$route.params.m_id

  //   }
  // },
  // m_id : this.$route.params.m_id,

  state: {
    video_key: [],
  },
  mutations: {
    updateInfo (state , video_key){
      state.video_key = video_key
    }
  },
  getters:{
    m_id : this.route.params.m_id 
  },
  actions: {

    fetchData({commit,getters}){
      axios.get(`https://api.themoviedb.org/3/movie/${this.m_id}/videos?api_key=7bc75e1ed95b84e912176b719cdeeff9&language=en-US`)
        .then(response =>{
          commit('updateInfo',response.data.results[0].key)
        })
    }
  }
})

Collectives™ on Stack Overflow

Vue Js Axios get method

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related