如何将数组从 Laravel Blade 传递到 Laravel 6/Vue 2.6 中的 Vue 组件。*

Posted 2023-02-22

【中文标题】如何将数组从 Laravel Blade 传递到 Laravel 6/Vue 2.6 中的 Vue 组件。*

【英文标题】：How to Pass an array from Laravel Blade to a Vue Component in Laravel 6/Vue 2.6.*

【发布时间】：2020-11-12 05:10:46

【问题描述】：

我将一个对象从我的控制器传递到我的blade.php.file。从那里我使用对象表示法从我的对象中获取变量，这给我留下了一个数组。然后我试图将我的blade.php文件中的数据数组传递给我的vue组件。我想传递整个数组，而不仅仅是它的一个索引。截至目前，当我尝试传递数组时，我收到错误htmlspecialchars() expects parameter 1 to be string, array given，这是有道理的，因为我正在传递一个数组（这就是我想要的）。如何成功地将一组数据从 laravel Blade 传递到 VUE？

blade.php 文件

<div id="app">
   <draggable
       draggable-table=" $table->vars ">
    </draggable>
</div>

VUE 组件

<template>

</template>

<script>
    export default 
       props: ['draggableTable'],
   ;

</script>

编辑：

按照我的建议，我在刀片表中添加了 : 和 json_encode，如下所示： :draggable-table="json_encode($table->vars)"> 但是当我检查我的 VUE 控制台时，我的组件不再显示，并且只显示了根，没有传入任何数组数据。（见图）

第二次编辑：

我现在正在尝试通过 axios 执行此操作。我在<script> 标签内将它添加到我的组件中

 data()
          return
            table: this.draggableTable
          
      ,
       methods: 
          
          getData()
              axios.get(this.endpoint, 
                 table: this.table,
              ).then(res => 
                 console.log(res);
              ).catch(err => 
                 console.log(err);
              );
          
       ,

computed: 
          endpoint()
             return window.location.protocol + "//" + window.location.host + '/users';
          
      

app.js

const app = new Vue(
  el: '#app'
);

那么现在如何将数据从刀片传递到 VUE？

谢谢。

【问题讨论】：

<draggable :draggable-table="@json($table->vars)"></draggable> 应该可以工作。

@Remul 我也尝试了您的解决方案，但在我的 VUE 浏览器控制台中，只显示根组件，不包含任何数据。

能否分享一下 app.js 或者你创建 vue 实例的地方

@TEFO 刚刚在我的问题中发布了它

所以你没有在根实例中本地注册它。您是否在全球范围内注册了此组件？

【参考方案1】：

您可以将其作为 JSON 对象发送，然后在 Vue 中或在接受它作为道具时对其进行解析。

<div id="app">
   <draggable
       :draggable-table=JSON.parse( json_encode($table) )>
    </draggable>
</div>

如果您在 Vue 中使用 API 调用，为什么需要将数据从 Blade 传递到 Vue？您已经可以使用数据了。

【讨论】：

我将组件恢复为简单并删除了 axios。它再次看起来像我问题的原始部分一样。因此，在我的刀片文件中，我使用上面发布的代码 sn-p 尝试将数据从刀片.php 传递到 VUE 组件，但在我的控制台中我收到此错误：[Vue warn]: Error in render: "SyntaxError: Unexpected token u在 JSON 中的位置 0"（在 中找到），您的语法是否正确？

服务器返回什么？ $table 存在吗？只回显 json_encode($table) 会得到什么？

我在一个刀片文件中，所以我必须 @dd() $table 但是当我 dd($table) 我回到 ComponentView #1538 ▼ +vars: array:38 [▶] + parent: null +children: [] -rendered: true 如果我添加 json_encode，那么当我 dd($table) 时它返回 false。

只有 json_encode($table) 在您的视图中。你得到了什么？你有 laravel/telescope 吗？

所以我得到一个包含 HTML 的长字符串。 html 是我试图传递给 VUE 的表，但它是作为 HTML 字符串进行的。 ""

【参考方案2】：

你必须在prop中添加:，活在代码下面。

<div id="app">
   <draggable
       :draggable-table=" json_encode($table->vars) ">
    </draggable>
</div>

【讨论】：

我尝试实施您的解决方案，但它对我不起作用。我的数据没有传递到我的组件。我编辑了我的问题以包含详细信息和照片。谢谢。

我认为存在组件加载问题，请您检查为什么组件未加载。

什么意思？

您的组件未加载。

所以使用 axios 我能够传递数据，但它以 html 字符串的形式通过，如下所示：“....表数据在这里...”，我在刀片文件中使用 json_encode。我想传递数组而不是 HTML 字符串。我该怎么做？