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

Question

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

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

我的 blade 模板：

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

Dynamic-Props

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

How can I access Vue JS props in a method in a component?

laravel

vue.js

vue-component