Axiosの小道具をVue.jsに渡しますか？

Question

親コンポーネントから子コンポーネントに小道具を渡したいと思います。私の小道具はtidです。

これは、親コンポーネントである：これは、子コンポーネントである

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

：

<script> 
import Chapter from "./chapter"; 
import Http from "../../services/http/httpService"; 
export default { 
    components: {Chapter}, 
    props:['tid'], 
    name: "library", 
    data(){ 
     return{ 
      library:{}, 
     } 
    }, 
    computed:{ 
     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)) 
    } 
} 

これは、httpソースです：

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; 

私がしたいです0123を渡すの値はhttp.get関数になります。例えば：

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

tid

値がundefinedあるが。 マウントされたフックまたは作成されたフックでtidを取得するにはどうすればよいですか？親コンポーネントで

Answer 1

私はVueを使い慣れていませんが、変更を引き起こす「ウォッチャー」を追加したいと思うかもしれません。あなたの "トラックオブジェクト"は作成時に空ですが、この先頭のtrack.category_idは未定義です。 HTTP getから答えが得られると、値は設定されますが、ライブラリコンポーネントでは更新されません。

このような何か：

<script> 
import Chapter from "./chapter"; 
import Http from "../../services/http/httpService"; 
export default { 
    components: {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)) 
     } 
     }, 
    computed:{ 
     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

（カントのテストコードが、あなたのアイデアを得るかもしれません）

Answer 2

このコードにしてみてくださいは

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

スニペットそして、あなたの子コンポーネントのコードに次のようになります：

<script> 
    import Chapter from "./chapter"; 
    import Http from "../../services/http/httpService"; 
    export default { 
    components: { 
     Chapter 
    }, 
    props: [ 'tid' ], 
    name: 'library', 
    data() { 
     return { 
     library: {}, 
     } 
    }, 
    computed: { 
     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> 

Answer 3

これは親スクリプトのセクションです：

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

export default { 
    components: {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)) 
    } 
}