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

Posted 2023-03-14

【中文标题】将 axios 中的道具传递给 Vue.js？

【英文标题】：Passing props in axios to Vue.js?

【发布时间】：2018-05-31 21:35:55

【问题描述】：

我想将 props 从父组件传递给子组件。我的道具是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。 如何在 mount 或 created 钩子中获取 tid？

【问题讨论】：

对我来说一切正常。 track.category_id 是否在您的父级中定义？

【参考方案1】：

在父组件中试试这个代码sn-ps

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

【讨论】：

tid 是动态的，不是静态的，是我的项目。

@Mohammadnajjary 是动态的，只有 props 的名称是静态的，对吧？tid 的值是动态的

你的答案是不确定的

【参考方案2】：

这是父脚本部分：

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

【讨论】：

您使用了我提供的脚本吗？您可以使用this.youPropsName 检查您传递的道具，您说“我想将 tid 值传递给 http.get 函数”。您可以在 Vue 的 mounted () 或 created () 生命周期钩子中的子组件中使用 this.tid 来检查 tid 的值

我就是这么做的，但是 this.tid 是未定义的。

你有没有试过检查track.category_id的值是否未定义？

【参考方案3】：

我是 Vue 的新手，但我认为您可能想要添加一个在更改时触发的“观察者”。您的“track-object”在创建时为空，此前导 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

（无法测试代码，但您可能会明白）

【讨论】：

匿名：为什么不对此投反对票而没有任何评论？