bart
582
8
Vue

Pass config array as prop to a component

Posted 2 years ago by bart

Hey everybody,

I want to implement a scope selection using VueJS components via Vueify. We have some basic configuration in a config/acme.php file stored as an array like 'available_scopes' => ['foo', 'bar']. I do want to show these available scope in a dropdown using a VueJS component but I don't know how to pass an array to the component props. Is this possible without JSON encode and decode?

// template.blade.php
<scope-selector scopes="{{ config('acme.scopes') }}"></scope-selector>

// component.vue
<script>
    export default {
        props: ['scopes'],
        ready() {
            console.log(this.scopes);
        }
    }
</script>

When doing this I'm getting "htmlentities() expects parameter 1 to be string, array given", sure. I could json_encode() the config array but it feels bad to me encoding this into JSON and decode it in the component. Do you have any suggestions what I could do here?

Thanks a lot!

Please sign in or create an account to participate in this conversation.

Reply to

Use Markdown with GitHub-flavored code blocks.