Question

我正在将一个对象从控制器传递到我的blade.php.file。从那里，我使用对象表示法从对象中获取变量，这给我留下了一个数组。然后，我试图将该数据数组从我的blade.php文件传递到vue组件。我想传递整个数组，而不只是传递它的一个索引。截至目前，当我尝试传递数组时，出现错误htmlspecialchars() expects parameter 1 to be string, array given，这是有道理的，因为我正在传递数组（这是我想要的）。如何成功将数据从laravel刀片传递到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控制台时，我的组件不再显示，只显示了root，而没有传入任何数组数据。（见照片）

第二次编辑：

我现在正在尝试通过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

您必须在代码中的属性中添加:。

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

Answer 2

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

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

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

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

2 个答案: