Vue - How to correctly add new global data elements & access them from directives and components

I'm having big troubles on working with vue. I'm really new to vue - and I'm currently using it for my spark application i'm building.

I added a custom property to the global spark object like this

window.Spark = <?php echo json_encode(array_merge(
         Spark::scriptVariables(), [
             'custom' => [
                 'passwords' => [[ 'name' => 'test', 'description' => 'asd']],
                 'selectedPassword' => null
             ]
         ]
)); ?>

I have a passowrd-list component which I use like this

<passwords-list :list="custom.passwords"></passwords-list>

I added :custom="spark.custom" as property to the home component (as seen in vue devtools it is working)

Using a form and a directive I now change the custom.passwords data, however the list is not updating.

dannydjones

9 years ago

Level 6

If you have access to the spark github (can be added from the spark settings page) I put forward a pull request detailing a method I think would be a good global solution here: https://github.com/laravel/spark/pull/88

Taylor is holding off on implementing it however so I feel he may be looking into a more well rounded solution as this imo feels slightly messy.

Let me know if you need any help :)

Please or to participate in this conversation.