將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; 

我想通過tid值爲http.get函數。例如：

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

然而tid值爲undefined。 如何在掛載或創建的掛鉤中獲得tid？

Answer 1

我是Vue的新手，但我想你可能想添加一個觸發變化的「觀察者」。你的「軌道對象」在創建時是空的，這個領先的track.category_id是未定義的。然後，當您從HTTP獲取答案時，您的值已設置，但未在庫組件中更新。

事情是這樣的：

<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)) 
    } 
}