After reading about normalizing complex data, I am facing a challenge with creating new objects and accessing them by their unique IDs in a component that is generated on the click of a button. I need to be able to assign these new objects to my parent object and normalize the data for potentially hundreds of unique budget row objects. Any guidance on how to achieve this would be greatly appreciated as I find it difficult to apply the information from forum posts to my specific situation.
state: {
// Current state of the application lies here.
// budgetRows array at webpage load, base state
budgetRows: {}
},
getters: {
// Compute derived state based on the current state. More like computed property.
// Gets budgetRows array from state
budgetList: state => {
return state.budgetRows
},
// should get single array items from budgetRows based on component being accessed
budgetListItem: state => {
return state.budgetRows
}
},
mutations: {
// Mutate the current state
// Used to create a new row and push into budgetRows array (generate uniq id as well)
createRow (state) {
const uid = uniqId()
Object.assign(state.budgetRows, {[uid]: defaultRow})
// console.log(state.budgetRows)
},
Child Component:
<div v-for="(budget, index) in budgetRowsList" :key="index">
{{ index }}
<budgetItemRowContent></budgetItemRowContent>
<progress data-min="0" data-max="100" data-value="20"></progress>
</div>
</div>
</div>
<footer class="budgetGroupFooter">
<div class="budgetGroupFooter-Content budgetGroupFooter-Content--Narrow">
<button class="addBudgetItem" id="addBudgetItem" v-on:click="createNewContent()">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
<path fill="#FD0EBF" d="M3 0v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2z"></path>
</svg>
Add Item
</button>
</div>
</footer>
<script>
import budgetItemRowContent from '../components/budgetItemRowContent.vue'
import { store } from '../store'
export default {
name: 'budgetGroup',
components: {
budgetItemRowContent,
store
},
data: () => {
return {
budgetItemHeading: 'Housing'
// creates array containing object for budget row information
}
},
computed: {
budgetRowsList () {
return this.$store.getters.budgetList
}
},
methods: {
createNewContent () {
this.$store.commit('createRow')
}
}
}
On two clicks, two more child components are created with unique ids