将数据从刀片传递到 vue 组件答案

【问题标题】：Pass data from blade to vue component将数据从刀片传递到 vue 组件
【发布时间】：2018-08-24 05:28:37
【问题描述】：

我正在尝试学习 vue，并且我也想将它与 laravel 集成.. 我只是想将用户 ID 从刀片发送到 vue 组件，以便我可以在那里执行放置请求。假设我在刀片中有这个：

<example></example>

如何将 Auth::user()->id 发送到该组件并使用它。

我一直在寻找这个，但找不到一个可以明确这一点的答案。

谢谢！

【问题讨论】：

你可以在你的刀片中使用它：<span hashid="{{ Auth::user()->id }}"></span> 并在你的 vue 组件中这样做：<script> export default { data: function () { return { hashid: '' } } } </script> 并在任何地方控制它，它会给你身份验证ID！
这可能对你有用，它是一个关于 vue/laravel 的免费系列vuecasts.com
您可以通过使它们在窗口对象中全局可访问来传递一些变量，因此在您的 app.blade.php 中有一个定义变量的脚本标签，然后很容易访问它。虽然我建议将 vue 和前端视为一个独立的应用程序，通过请求和 JWT 身份验证获取信息

标签： laravel vue.js

【解决方案1】：

要将数据传递给您的组件，您可以使用props。通过here 查找有关道具的更多信息。 This 也是定义这些道具的好来源。

你可以这样做：

<example :userId="{{ Auth::user()->id }}"></example>

或

<example v-bind:userId="{{ Auth::user()->id }}"></example>

然后在您的Example.vue 文件中，您必须定义您的道具。然后你可以通过this.userId访问它。

喜欢：

<script>
  export default {
    props: ['userId'],
    mounted () {
      // Do something useful with the data in the template
      console.dir(this.userId)
    }
  }
</script>

【讨论】：

【解决方案2】：

如果你通过 Laravel 提供文件

那么这里是你可以应用的技巧。

在您的app.blade.php中

@if(auth()->check())
<script>
    window.User = {!! auth()->user()  !!}
</script>
@endif

现在您可以访问全局可用的User 对象

希望这会有所帮助。

【讨论】：

看来你可以帮助我。看看这个：stackoverflow.com/questions/49664451/…
但是 vue.js 会抛出警告：vue.js:634 [Vue warn]: Error compile template: Templates 应该只负责将状态映射到 UI。避免在模板中放置带有副作用的标签，例如
如果这种方法有点安全，有人可以评论一下吗？

【解决方案3】：

调用组件，

<example :user-id="{{ Auth::user()->id }}"></example>

在组件中，

<script>
    export default {
        props: ['userId'],
        mounted () {
            console.log(userId)
        }
    }
</script>

注意 - 为 prop userId 添加值时，您需要使用 user-id 而不是驼峰式大小写。

【讨论】：

【解决方案4】：

https://laravel.com/docs/8.x/blade#blade-and-javascript-frameworks

渲染 JSON

有时您可以将数组传递给您的视图，以便将其呈现为 JSON 以初始化 JavaScript 变量。例如：

<script>
    var app = <?php echo json_encode($array); ?>;
</script>

但是，您可以使用 @json Blade 指令，而不是手动调用 json_encode。 @json 指令接受与 PHP 的 json_encode 函数相同的参数。默认情况下，@json 指令使用 JSON_HEX_TAG、JSON_HEX_APOS、JSON_HEX_AMP 和 JSON_HEX_QUOT 标志调用 json_encode 函数：

<script>
    var app = @json($array);

    var app = @json($array, JSON_PRETTY_PRINT);
</script>

【讨论】：

【解决方案5】：

只是为那些仍然出错的人添加。对我来说，这个<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"

虽然错误我可以看到 $item->title 被替换为它的值。所以我试着这样做<askquestionmodal :product="'{{ $item->title }}'"></askquestionmodal>

我有完整的工作代码。

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

【讨论】：