CODEWITHSUNDEEP
javascriptlaravelvue.js
Guntar
Guntar

Reputation: 523

Pass in an attribute into Treeselect vue component from Laravel view

I am trying to wrap Vue-Treeselect link: https://vue-treeselect.js.org/#node in it's own vue component so I can simply have e.g. <tree-select></tree-select> inside Laravel view file where I need it.

What I can't figure out is, how do I pass in some instance specific props from Laravel view and use the attribute value inside component template? I would like to pass in a field name from within Laravel view, something like this: <tree-select name='property_ids'></tree-select> later vue component template could use the passed in name for name attribute inside the component template.

I am using the Getting Started code in https://vue-treeselect.js.org/ So in my Laravel view form I would like to have this tag
<tree-select name='property_ids'></tree-select> But how do I make the name attribute value inside the vue component template (sample code below)?

<template>
    <div>
        <treeselect v-model="value" :multiple="true" :options="options" name="passedInName"></treeselect>
    </div>
</template>

<script>
    // import the component
    import Treeselect from '@riophae/vue-treeselect'
    // import the styles
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {
        // register the component
        components: { Treeselect },
        data() {
            return {
                // define the default value
                value: [],
                // define options
                options: [  {
                    id: 'b',
                    label: 'b',
                }, {
                    id: 'z',
                    label: 'z',
                }, {
                    id: 'x',
                    label: 'x',
                } , {
                    id: 'v',
                    label: 'v',
                }],
            }
        },
    }
</script>

Upvotes: 0

Views: 1064

Answers (1)

Salim Djerbouh
Salim Djerbouh

Reputation: 11044

You have to declare the passed props inside your vue component to use them in the template

<template>
    <div>
        <!-- Pass the prop to the name attribute -->
        <treeselect v-model="value" :multiple="true" :options="options" :name="this.name">
        </treeselect>
    </div>
</template>

<script>
export default {
    props: ['name'], // <-- The declared prop
};
</script>

Upvotes: 1

Related Questions