How to Pass an array from Laravel Blade to a Vue Component in Laravel 6/Vue 2.6.*

Question

I am passing an object from my controller to my blade.php.file. From there I use object notation to get the variables from my object which leaves me with an array. I then am trying to pass that array of data from my blade.php file to my vue component. I want to pass the entire array not just one index of it. As of right now when I try to pass the array I get the error htmlspecialchars() expects parameter 1 to be string, array given which makes sense because I am passing an array (which is what I want). How do I successfully pass an array of data from laravel blade to VUE?

blade.php file

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

VUE component

<template>

</template>

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

</script>

EDIT:

As suggested to me I added a : and json_encode in my blade fole table like so: :draggable-table="{{json_encode($table->vars)}}"> But when I check my VUE console my component no longer shows and only root is shown with none of the array data passed in. (See photo)

2ND EDIT:

I am trying to do this via axios now. I added this to my component within the <script> tags

 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'
});

So now how to I pass the data from blade to VUE?

Thank you.

Answer 1

you have to add : in prop, live below code.

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

Answer 2

You can just send it as a JSON object and then parse it either in Vue or when accepting it as a prop.

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

Why would you need to pass data from Blade to Vue if you are using an API call in Vue? Data is already available to you.