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，请删除:尝试：{/ p>

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

Dynamic-Props

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

2 个答案: