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

Question

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

到目前为止，我能够从固定的 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

不要在模板中添加:

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

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

Answer 2

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

所以你需要在父对象的data对象中定义它们，

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

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

动态道具