I want to encapsulate Vue-Treeselect link: within its own custom vue component. This way, I can easily use something like
<tree-select></tree-select>However, the challenge I'm facing is figuring out how to pass specific props from the Laravel view to the component and then utilize those attribute values inside the template. For instance, I would like to pass a field name from the Laravel view like this:
<tree-select name='property_ids'></tree-select>Currently, I am following the Getting Started guide on . In my Laravel form view, I envision including this tag:
<tree-select name='property_ids'></tree-select><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>