Question

我试图学习vue，并且我想把它与laravel整合在一起.. 我只想将用户ID从刀片发送到vue组件，这样我就可以在那里执行put请求。让我们说我在刀片中有这个：

<example></example>

如何将Auth :: user（） - ＆gt; id发送到此组件并使用它。

我一直在寻找这个，但无法找到一个明确的答案。

谢谢！

Answer 1

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

您可以执行以下操作：

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

OR

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

Answer 2

如果您通过Laravel提供文件

然后，这是你可以应用的技巧。

在app.blade.php

中

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

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

希望这有帮助。

Answer 3

呼叫组件，

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

在组件中，

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

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

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

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>

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

5 个答案: