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

Question

我将一个对象从我的控制器传递到我的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？

谢谢。

Answer 1

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

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

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

Answer 2

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

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