Vue3 組合 API 中道具的反應性？

Question

我正在觀看子組件（ basicSalaryMin和basicSalaryMax ）上的幾個道具。 當值更改時，我將嘗試更新父組件上的反應值（ data.companyModels也作為allReactiveData中的道具傳遞給子組件）。

子組件：

<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,
 
     }
   }'

父組件：

<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,
    }
  )}

然后，目標是檢查等級的值（將在 1 和 100 之間變化）並根據需要創建盡可能多的等距工資值以匹配等級編號。 有什么想法嗎？

Answer 1

如果您想訪問或修改腳本中的ref ，您需要執行

yourref.value 。

所以在你的情況下allReactiveData.value

查看文檔