I'm watching a couple of props on a child component (basicSalaryMin and basicSalaryMax). When the value changes I'm then trying to update a reactive the value on the parent component (data.companyModels which is also passed to the child component as a prop inside allReactiveData).
Child component:
<template>
<div>
{{allReactiveData.companyModels}} // all data is rendered!
</div>
</template>
<script>
import { toRefs, watch, ref, reactive } from "vue";
export default {
name: 'SimPrivate',
props: {
reactiveData: {
required: true,
type: Object
},
},
setup (props, { emit }) {
const allReactiveData = ref(props.reactiveData);
const basicsalaryMin = ref(props.reactiveData.basicsalaryMin);
const basicsalaryMax = ref(props.reactiveData.basicsalaryMax);
const changeCompanyProfit = ref(props.changeCompanyProfit)
watch([basicsalaryMin, basicsalaryMax], ([newBSMin, newBSMax], [prevBSMin, prevBSMax]) =>
{
let wagesArray =[]
wagesArray.push(newBSMin, newBSMax);
adjustAllWorkersSalaries(wagesArray);
allReactiveData.companyModels.forEach(function(company)
//console is saying Uncaught (in promise) TypeError:
Cannot read property 'forEach' of undefined!!
and Can't do anything to the object from this point forward
I then need to add new sub-properties depending on
how many __ranks__ the property companyModel has...
but I'll get to that later
{
for (const [key, value] of Object.entries(company)) {
if (key === 'ranks') {
// if 1 rank add sub-object to companyModel.wages with var basicsalaryMin value called "wages: {1: basicsalaryMin}"
// if 2 ranks add sub-object: "wages:{1: basicsalaryMin, 2: basicsalaryMax }
// if 3 ranks add sub object: "wages...
// as in the model bellow but allowing for more levels
}
}
})
})
return {
allReactiveData,
basicsalaryMin,
basicsalaryMax,
}
}'
Parent component:
<template>
<div>
<input @change="handleMaxSalaries(basicsalaryMax)" id="maxsalaryInput" v-model.number='basicsalaryMax'>
<SimPrivate :reactiveData='reactiveData' @adjustAllWorkersSalaries='adjustAllWorkersSalaries'/>
</div>
</template>
<script>
</script>
import { toRefs, watch, ref, reactive } from "vue";
import SimPrivate from '../views/SimPrivate.vue'
export default {
name: "Simulator",
components: {
Slider,
SimPrivate
},
props: {},
setup( props, {emit}) {
let data = reactive({
avrgProfit: 0,
basicsalaryMin: 3000,
basicsalaryMax: 5000,
TotalUBICreatedPerMonth: 0,
companyModels: [
{ id: 'Big', workers: 250, ranks: 5, companyAvrgProfit: 0, totalWages: Number, wages: {1: '3000', 2: '3500', 3:'4000', 4: '4500', 5: '5000' }},
{ id: 'Medium', workers: 75, ranks: 3, companyAvrgProfit: 0, totalWages: Number, wages: {1: '3000', 2: '4000', 3:'5000' }},
{ id: 'Small', workers: 10, ranks: 2, companyAvrgProfit: 0, totalWages: Number, wages: {1: '3000', 2: '5000' }},
{ id: 'Individual', workers: 1, ranks: 1, companyAvrgProfit: 0, totalWages: Number, wages: {1: '3000'}}}
],
)}
let reactiveData = toRefs(data)
return {
allReactiveData,
basicsalaryMin,
basicsalaryMax,
}
)}
The goal is to then check the value of ranks (which will vary between 1 and 100) and create as many equidistant wage values as needed to match the rank number. Any thoughts?
