laravel 将数据从刀片传递到 vue 组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49298845/
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
Pass data from blade to vue component
提问by Ovidiu G
I'm trying to learn vue and with that I want to integrate it with laravel too.. I simply want to send the user id from blade to vue component so I can perform a put request there. Let's say I have this in blade:
我正在尝试学习 vue 并且我也想将它与 laravel 集成..我只是想将用户 ID 从刀片发送到 vue 组件，以便我可以在那里执行放置请求。假设我在刀片中有这个：
<example></example>
How can I send Auth::user()->id into this component and use it.
如何将 Auth::user()->id 发送到此组件并使用它。
I kept searching for this but couldn't find an answer that will make this clear.
我一直在寻找这个，但找不到一个可以说明这一点的答案。
Thanks!
谢谢！
回答by Giesburts
To pass down data to your components you can use props. Find more info about props over here. Thisis also a good source for defining those props.
要将数据传递给您的组件，您可以使用props. 在此处查找有关道具的更多信息。这也是定义这些道具的好来源。
You can do something like:
您可以执行以下操作：
<example :userId="{{ Auth::user()->id }}"></example>
OR
或者
<example v-bind:userId="{{ Auth::user()->id }}"></example>
And then in your Example.vuefile you have to define your prop. Then you can access it by this.userId.
然后在你的Example.vue文件中你必须定义你的道具。然后您可以通过 访问它this.userId。
Like :
喜欢 ：
<script>
export default {
props: ['userId'],
mounted () {
// Do something useful with the data in the template
console.dir(this.userId)
}
}
</script>
回答by Adnan Mumtaz
If you are serving files through Laravel
如果您通过 Laravel 提供文件
Then here is the trick that you can apply.
然后这是您可以应用的技巧。
In Your app.blade.php
在你的 app.blade.php
@if(auth()->check())
<script>
window.User = {!! auth()->user() !!}
</script>
@endif
Now you can access UserObject which available globally
现在您可以访问User全局可用的对象
Hope this helps.
希望这可以帮助。
回答by schel4ok
Just to add for those who still get error.
For me this <askquestionmodal :product="{{ $item->title }}"></askquestionmodal>still gives error in console and instead showing html page I saw white screen.
只是为那些仍然出错的人添加。对我来说，这<askquestionmodal :product="{{ $item->title }}"></askquestionmodal>仍然在控制台中出现错误，而是显示 html 页面，我看到了白屏。
[Vue warn]: Error compiling template:
invalid expression: Unexpected identifier in
Coupling to connect 2 rods М14 CF-10
Raw expression: :product="Coupling to connect 2 rods М14 CF-10"
Though in error I can see that $item->title is replaced with its value.
So then I tried to do like that <askquestionmodal :product="'{{ $item->title }}'"></askquestionmodal>
虽然在错误中我可以看到 $item->title 被替换为其值。然后我试着这样做<askquestionmodal :product="'{{ $item->title }}'"></askquestionmodal>
And I have fully working code.
我有完整的工作代码。
/components/askquestionmodal.vue
/components/askquestionmodal.vue
<template>
<div class="modal-body">
<p>{{ product }}</p>
</div>
</template>
<script>
export default {
name: "AskQuestionModal",
props: ['product'],
mounted() {
console.log('AskQuestionModal component mounted.')
}
}
</script>
