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

Question

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

刀片.php文件

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

VUE 组件

<template>

</template>

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

</script>

编辑：

正如向我建议的那样，我在刀片 fole 表中添加了一个:和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';
          }
      }

应用程序.js

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

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

谢谢你。

Answer 1

您必须添加:在道具中，位于代码下方。

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

Answer 2

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

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

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