将axios中的道具传递给Vue.js？

  • Z时代
  • 2024-01-10
  • 分类：问答

我想将道具从父组件传递给子组件。我的道具是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？

回答：

我是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

（广东话测试代码，但你可能会得到的想法）

回答：

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

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

回答：

这是父脚本部分：

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

以上是 将axios中的道具传递给Vue.js？ 的全部内容， 来源链接： utcz.com/qa/263990.html

回到顶部