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

Question

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

到目前为止，我能够从固定 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 方法并简单地控制台记录值，但我仍然未定义。我正在尝试做的事情是可能的还是我完全误解了道具的工作原理？

Answer 1

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

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

但如果你想通过this-user并且this-project就像值一样删除:尝试：

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

动态道具