如何在组件的方法中访问 Vue JS 道具？

Posted 2023-02-22

【中文标题】如何在组件的方法中访问 Vue JS 道具？

【英文标题】：How can I access Vue JS props in a method in a component?

【发布时间】：2017-06-05 09:00:09

【问题描述】：

我对 props 的理解可能有误，但我似乎无法将 props 传递给组件，然后在方法中使用该值？

到目前为止，我能够从固定的 API 获取数据并从 vue 组件输出所有内容，现在我希望 api 源依赖于传递给组件的变量。

我的刀片模板：

<projectstatuses :userslug="this-user" :projectslug="this-project"></projectstatuses>

然后在我的 Vue 组件中：

export default 
  props: 
      userslug: 
            type: String,
            default: "other-user",
        ,
      projectslug: 
            type: String,
            default: "other-project",
        
    ,
    data() 
        return 
            statuses : [],
        
    ,
    created()
        this.getStatuses();
    ,
    methods : 
        getStatuses()
        console.log(this.userslug);
        console.log(this.projectslug);
            axios.get('/api/' + this.userslug + '/' + this.projectslug)
                .then((response) => 
                    let statuses = response.data;
                    this.statuses = statuses.statuses;
                    console.log(response.data.statuses);
                )
                .catch(
                    (response) => 
                        console.log('error');
                        console.log(response.data);
                    
                );
        
    

在控制台中，我得到默认值，如果我删除默认值，我得到未定义。我尝试删除 api 方法并简单地控制台记录值，但我仍然未定义。我正在尝试做的事情是可能的还是我完全误解了道具的工作原理？

【问题讨论】：

您是否从父组件/刀片的 API 中获取 this-data 和 this-project 值？如果是，则可能存在组件在从 API 获取数据之前渲染的问题，然后这些值正在发送未定义的值。

【参考方案1】：

您正在尝试将 bind this-user 和 this-project 作为属性而不是值，

因此您需要在父对象的data 对象中定义它们，

但如果你想传递 this-user 和 this-project 作为值，请删除 : 试试：

<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>

Dynamic-Props

【讨论】：

这似乎是问题所在。我不知道动态道具所以谢谢你的链接！

【参考方案2】：

不要在模板中添加:：

<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>

Vue 会期望有数据绑定到 this-user。

【讨论】：

啊，很高兴为您提供帮助。你能接受我的回答吗？谢谢:)