laravel 如何在组件的方法中访问 Vue JS props？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41762510/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I access Vue JS props in a method in a component?
提问by mims
I may be wrong in my understanding of props but I can't seem to be able to pass a prop to a component and then use the value in a method?
我对 props 的理解可能有误，但我似乎无法将 prop 传递给组件，然后在方法中使用该值？
So far I am able to get data from a fixed API and output everything from the vue component, now I would like the api source to be dependent on the variable passed to the component.
到目前为止，我能够从固定 API 获取数据并从 vue 组件输出所有内容，现在我希望 api 源依赖于传递给组件的变量。
My blade template:
我的刀片模板：
<projectstatuses :userslug="this-user" :projectslug="this-project"></projectstatuses>
Then in my Vue Component:
然后在我的 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);
}
);
}
}
}
In the console I get the default values, if I remove the default values I get undefined. I have tried removing the api method and simply console logging the values but I still get undefined. Is what I'm trying to do possible or have I completely misunderstood how props work?
在控制台中，我得到默认值，如果我删除默认值，我会得到未定义。我尝试删除 api 方法并简单地控制台记录值，但我仍然未定义。我正在尝试做的事情是可能的还是我完全误解了道具的工作原理？
采纳答案by ABDEL-RHMAN
You are trying to bindthis-userand this-projectas a properties not as values ,
您正在尝试bindthis-user和this-project为性而不是值，
So you will need to define them in the dataobject in the parent,
所以你需要data在父对象的对象中定义它们，
but if you want to pass this-userand this-projectjust as value remove the :try that:
但是如果你想通过this-user并且this-project就像价值一样删除:尝试：
<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>
<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>
回答by krisanalfa
Don't add :in your template:
不要:在你的模板中添加：
<projectstatuses userslug="this-user" projectslug="this-project"></projectstatuses>
Vue will expect there's data bound to this-user.
Vue 会期望有数据绑定到this-user.
