javascript - Passing props in axios to Vue.js? - Stack Overflow

admin管理员组

文章数量:1355646

I want to pass props from a parent ponent to a child ponent. My prop is tid.

This is the parent ponent:

<div id="tracksec" class="panel-collapse collapse">
    <library :tid="track.category_id"></library>
</div>

This is the child ponent:

<script>
import Chapter from "./chapter";
import Http from "../../services/http/httpService";
export default {
    ponents: {Chapter},
    props:['tid'],
    name: "library",
    data(){
        return{
            library:{},
        }
    },
    puted:{
      getPr(){
          return this.$props;
      }
    },
        mounted(){
      console.log(this.$props);
        Http.get('/api/interactive/lib/' + this.tid)
            .then(response => this.library = response.data)
            .catch(error => console.log(error.response.data))
    }
}

This is the http source:

import axios from 'axios';


class httpService {

static get(url, params) {
    if (!params) {
        return axios.get(url);
    }
    return axios.get(url, {
        params: params
    });
}

static post(url, params) {
    return axios.post(url, params);
}
}

export default httpService;

I want to pass the tid value to the http.get function. For example:

Http.get('/api/interactive/lib/' + this.tid)

However the tid value is undefined. How do I get tid in the mounted or created hook?

I want to pass props from a parent ponent to a child ponent. My prop is tid.

This is the parent ponent:

<div id="tracksec" class="panel-collapse collapse">
    <library :tid="track.category_id"></library>
</div>

This is the child ponent:

<script>
import Chapter from "./chapter";
import Http from "../../services/http/httpService";
export default {
    ponents: {Chapter},
    props:['tid'],
    name: "library",
    data(){
        return{
            library:{},
        }
    },
    puted:{
      getPr(){
          return this.$props;
      }
    },
        mounted(){
      console.log(this.$props);
        Http.get('/api/interactive/lib/' + this.tid)
            .then(response => this.library = response.data)
            .catch(error => console.log(error.response.data))
    }
}

This is the http source:

import axios from 'axios';


class httpService {

static get(url, params) {
    if (!params) {
        return axios.get(url);
    }
    return axios.get(url, {
        params: params
    });
}

static post(url, params) {
    return axios.post(url, params);
}
}

export default httpService;

I want to pass the tid value to the http.get function. For example:

Http.get('/api/interactive/lib/' + this.tid)

However the tid value is undefined. How do I get tid in the mounted or created hook?

• javascript
• laravel
• vuejs2
• axios

Share Improve this question Follow edited Dec 18, 2017 at 14:50 agrm 3,86244 gold badges2727 silver badges3636 bronze badges asked Dec 18, 2017 at 14:09 MohNjMohNj 49611 gold badge77 silver badges1919 bronze badges 1

• All looks right to me. Is the track.category_id defined in your parent? – i-- Commented Dec 18, 2017 at 14:51

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I'm new to Vue, but I think you might want to add a "watcher" that triggers on change. Your "track-object" is empty on create, this leading track.category_id being undefined. Then when you get an answer from your HTTP get, your value is set, but not updated in the library ponent.

Something like this:

<script>
import Chapter from "./chapter";
import Http from "../../services/http/httpService";
export default {
    ponents: {Chapter},
    props:['tid'],
    name: "library",
    data(){
        return{
            library:{},
        }
    },
    watch: {
        // if tid is updated, this will trigger... I Think :-D
        tid: function (value) {
          console.log(value);
            Http.get('/api/interactive/lib/' + value)
            .then(response => this.library = response.data)
            .catch(error => console.log(error.response.data))
        }
      },
    puted:{
      getPr(){
          return this.$props;
      }
    },
        mounted(){
      console.log(this.$props);
      
      // Will be undefined
      /*
        Http.get('/api/interactive/lib/' + this.tid)
            .then(response => this.library = response.data)
            .catch(error => console.log(error.response.data))*/
    }
}
</script>

Documentation about watchers

(Cant test the code, but you might get the idea)

In the parent ponent try to this code snippets

<div id="tracksec" class="panel-collapse collapse">
  <library tid="track.category_id"></library>
</div>

And then in your child ponent code will be look like this:

<script>
  import Chapter from "./chapter";
  import Http from "../../services/http/httpService";
  export default {
    ponents: {
      Chapter
    },
    props: [ 'tid' ],
    name: 'library',
    data () {
      return {
         library: {},
      }
    },
    puted: {
      getPr () {
          return this.tid;
      }
    },
    mounted () {
      const tidValue = this.tid // get the value of props you've passed
      console.log(tidValue) // check if it is getting the right value.
      // code for http request.
    }
}
</script>

this is parent script section:

   import Library from "./library";
import Http from '../../services/http/httpService';

export default {
    ponents: {Library},
    name: "interactive",
    data() {
        return {
            track: {},
        }
    },

    mounted() {
        Http.get('/api/interactive/track/' + this.$route.params.id)
            .then(response => this.track = response.data)
            .catch(error => console.log(error.response.data))
    }
}

本文标签： javascriptPassing props in axios to VuejsStack Overflow