2017-12-18 316 views
4

我想将道具从父组件传递给子组件。我的道具是tid将axios中的道具传递给Vue.js?

这是父组件:

<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

+0

一切看起来我的权利。您的父级中定义了“track.category_id”吗? –

回答

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

(广东话测试代码,但你可能会得到的想法)

+1

坦克兄弟,解决了 –

1

在父组件尝试将此代码片段

<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> 
+0

tid是动态不静态的,是我的项目。 –

+0

@Mohammadnajjary是动态的,只有道具的名字是静态的吗?,'tid'的值是动态的 –

+0

你的回答是undefined –

0

这是父脚本部分:

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

你用过我提供的脚本吗?你可以使用'this.youPropsName'来检查你通过的道具,你说过“我想把tid值传递给http.get函数”。你可以通过使用'this.tid'来检查'tid'的值,它放在Vue –

+0

的'mounted()'或'created()'生命周期钩子的子组件中,我确实是这样做的,但是this.tid是未定义的。 –

+0

您是否尝试过检查“track.category_id”的值是否未定义? –