Spark Custom Properties

I am struggling with this section of code in the Spark app.blade.php

    <!-- Global Spark Object -->
    <script>
        window.Spark = <?php echo json_encode(array_merge(
            Spark::scriptVariables(), [
                'project' => $project,
            ]
        )); ?>;
    </script>

This works fine, as per the documentation, if I am in a view where the project variable has been passed, but breaks the rest of Spark because obviously the project does not exist. I've tried conditionally wrapping this code but then nothing works.

I've been digging around for a while and tried all kinds of things, but I am stuck!

Does anyone have any idea how to conditionally include this project variable here please?

steve_laracasts

7 years ago

Best Answer

Level 7

I think I may have been conceptualising this incorrectly.

Regardless what I actually wanted to do was pass a variable from a Blade template to a Vue Component, for anyone else who may have followed the same weird train of thought as I did this is how you do that.

First send your data from your controller to your view as you would normally. Check you can view the data in your Blade template.

Then, on the element that you wish to pass the data include your passed data like this:

<my-component :project = "{{ $project->toJson() }}"></my-component>

Then in your Vue component (called 'my-component')

    props: ['project'],
    data() {
        return {
            title: this.project.title,
        };
    },

Which you can then use however you want!

Phew, for some reason this tool me far too long to figure out, but I am very happy to say this is now working perfectly and just in the places I want it.

Please or to participate in this conversation.