从 Blade 传递数据到 Vue 组件

Question

我想学习Vue，并希望将其与Laravel集成使用。 我只想从Blade发送用户ID到Vue组件，以便我可以在那里执行PUT请求。 假设我在Blade中有以下代码：

<example></example>

我该如何将 Auth::user()->id 发送到这个组件并使用它呢？我一直在寻找答案，但没有找到一个清晰明了的解释。谢谢！

- Ovidiu G

---

你可以在Blade模板中添加以下代码：<span hashid="{{ Auth::user()->id }}"></span>，然后在Vue组件中添加以下代码：<script> export default { data: function () { return { hashid: '' } } } </script>。你可以在任何地方使用console.log()打印出auth id。 - Hiren Gohel

这对您可能很有用，它是关于 Vue/Laravel 的免费系列，网址为 http://vuecasts.com。 - Christophvh

您可以通过将一些变量设置为全局变量并存储在 window 对象中来传递它们，因此在您的 app.blade.php 文件中，可以像定义变量的脚本标签那样轻松访问它们。尽管我建议您查看 vue 和前端，将其视为一个通过请求和 JWT 认证获取信息的应用程序。 - Sérgio Reis

Answer 1

要将数据传递给您的组件，可以使用props。有关props的更多信息，请查看此处。而这里则是定义这些props的好去处。

您可以像这样操作：

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

或者

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

然后在你的 Example.vue 文件中，你需要定义你的 prop。然后你可以通过 this.userId 访问它。

例如：

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

- Giesburts

Answer 2

如果你正在通过 Laravel 提供文件

那么这里有一个技巧可以应用。

在你的 app.blade.php 文件中，按照以下方式操作。

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

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

希望这能有所帮助。

- PULL STACK DEV

---

似乎你可以帮我。看看这个：https://stackoverflow.com/questions/49664451/how-can-i-add-condition-on-vue-component-that-is-loaded-from-the-view-blade-lara - moses toh

但是vue.js会抛出警告：vue.js:634 [Vue warn]: 编译模板时出错：模板只应负责将状态映射到UI。避免在模板中放置具有副作用的标签，例如<script>，因为它们不会被解析。 - Ruslan Skaldin

有人可以评论一下这种方法是否比较安全吗？ - SMPLYJR

Answer 3

调用组件，

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

在组件中，

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

注意 - 当向 prop userId 添加值时，需要使用短横线命名法 user-id，而不是使用驼峰命名法。

- vimuth

Answer 4

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

渲染 JSON

有时你可能会将一个数组传递给视图，以便在JavaScript变量中初始化JSON。例如：

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

然而，与其手动调用json_encode，您可以使用@json Blade指令。@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>

- fanish sederci

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

- schel4ok