I am working on creating a basic page builder that includes row elements, their child column elements, and finally the component that needs to be called. To accomplish this, I have designed an architecture where the dataset is defined in the root component and the data is passed to its child elements using props. Let's consider a root component:
<template>
<div>
<button @click.prevent="addRowField"></button>
<row-element v-if="elements.length" v-for="(row, index) in elements" :key="'row_index_'+index" :attrs="row.attrs" :child_components="row.child_components" :row_index="index"></row-element>
</div>
</template>
<script>
import RowElement from "../../Components/Builder/RowElement";
export default {
name: "edit",
data(){
return{
elements: [],
}
},
created() {
this.listenToEvents();
},
components: {
RowElement,
},
methods:{
addRowField() {
const row_element = {
component: 'row',
attrs: {},
child_components: [
]
}
this.elements.push(row_element)
}
},
}
</script>
In this code snippet, there is a button used to push the element, and its elements are passed to its child elements through props. The RowElement component has the following code:
<template>
<div>
<column-element v-if="child_components.length" v-for="(column,index) in child_components" :key="'element_index_'+index" :attrs="column.attrs" :child_components="column.child_components" :row_index="row_index" :column_index="index"></column-element>
</div>
<button @click="addColumn"></button>
</template>
<script>
import ColumnElement from "./ColumnElement";
export default {
name: "RowElement",
components: {ColumnElement},
props: {
attrs: Object,
child_components: Array,
row_index: Number
},
methods:{
addColumn(type, index) {
// Logic here then emit event for parent element to push columns
eventBus.$emit('add-columns', {column: column_element, index: index});
}
}
}
</script>