Vue - Pass props to a programmatically component - laravel

Question

I'm making a sidebar that can have dynamic content, using vuex
So, for exaple, I have this app with a Sidebar.vue that can loads a DynamicContent.vue, how do I pass a prop to that DynamicContent.vue inside
app.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import store from './store'
import Sidebar from './components/Sidebar'
import DynamicContent from './components/DynamicContent.vue'
Vue.component('sidebar', Sidebar)
const app = new Vue({
el: '#app',
store,
data() {
return {
dynamicContent: DynamicContent
}
},
methods: {
toggleSidebar() {
this.$store.commit('toggleSidebar', dynamicContent)
}
}
})
Sidebar.vue
Notice: I can't pass my props throught that component tag cause the components can have differents props
<template>
<div>
<component :is="component" />
</div>
</template>
<script>
export default {
computed: {
component() {
return this.$store.state.sidebarComponent
}
}
}
</script>
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
sidebarOpen: false,
sidebarComponent: null
},
mutations: {
toggleSidebar(state, component) {
state.sidebarOpen = ! state.sidebarOpen
state.sidebarComponent = component
},
}
})

Answer 1

To dynamically bind props, you can use v-bind this way
<template>
<div>
<component :is="component" v-bind="componentProps"/>
</div>
</template>
<script>
export default {
computed: {
component() {
return this.$store.state.sidebarComponent
}
componentProps {
return { prop1: 'value', prop2: 123 }
}
},
}
</script>
v-bind takes an object and pass all properties in it as props to component.