vue中多层数组 赋值出错

Question

array=[
{
createUser: ​​' '
numberOfPeriods: ''
pId: ' '
projectExpDetails: [
{
cId:
cName:
distributionProportion:
editable:
remarks:
transactionBudget:
unUsedBudget:
usedBudget:
},
{
cId:
cName:
distributionProportion:
editable:
remarks:
transactionBudget:
unUsedBudget:
usedBudget:
}
]
},
]
​
为数组array中projectExpDetails数组中的unUsedBudget字段赋值，
a为父下标，index子下标，col为动态字段
使用了：this.$set(this.array[a]['projectExpDetails'][index],col,value)赋值，使用this.array[a]['projectExpDetails'][index][col]=value,也是一样的效果
这样赋值把array下的每个projectExpDetails的unUsedBudget字段都赋值，
例：
array=[
{
createUser: ​​' '
numberOfPeriods: ' '
pId: ' '
projectExpDetails: [
{
cId:
cName:
distributionProportion:
editable:
remarks:
transactionBudget:
unUsedBudget: ‘赋的值’
usedBudget:
},
{
cId:
cName:
distributionProportion:
editable:
remarks:
transactionBudget:
unUsedBudget:
usedBudget:
}
]
},
{
createUser: ​​' '
numberOfPeriods: ' '
pId: ' '
projectExpDetails: [
{
cId:
cName:
distributionProportion:
editable:
remarks:
transactionBudget:
unUsedBudget: ‘赋的值’
usedBudget:
},
{
cId:
cName:
distributionProportion:
editable:
remarks:
transactionBudget:
unUsedBudget:
usedBudget:
}
]
},
{
createUser: ​​' '
numberOfPeriods: ' '
pId: ' '
projectExpDetails: [
{
cId:
cName:
distributionProportion:
editable:
remarks:
transactionBudget:
unUsedBudget: ‘赋的值’
usedBudget:
},
{
cId:
cName:
distributionProportion:
editable:
remarks:
transactionBudget:
unUsedBudget:
usedBudget:
}
]
},
{
createUser: ​​''
numberOfPeriods: ''
pId: ' '
projectExpDetails: [
{
cId:
cName:
distributionProportion:
editable:
remarks:
transactionBudget:
unUsedBudget: ‘赋的值’
usedBudget:
},
{
cId:
cName:
distributionProportion:
editable:
remarks:
transactionBudget:
unUsedBudget:
usedBudget:
}
]
},
]
求，赋值相应下标的的字段的值

Answer 1

this.$set(this.array[a]['projectExpDetails'][index],col,value)修改我这边是正常的

<template>
  <div class="app-container">
    <div v-for="(item, index) in array" :key="index">
      {{ item.projectExpDetails[1].unUsedBudget }}
    </div>
  </div>
</template>

<script>
export default {
  name: "test",
  components: {},
  data() {
    return {
      obj: {
        "01": "1111",
        "02": "222",
        "03": "33333",
        10: "44444",
        加班: "",
      },
      array: [
        {
          createUser: " ",
          numberOfPeriods: "",
          pId: " ",
          projectExpDetails: [
            {
              cId: "",
              cName: "",
              distributionProportion: "",
              editable: "",
              remarks: "",
              transactionBudget: "",
              unUsedBudget: "1",
              usedBudget: "",
            },
            {
              cId: "",
              cName: "",
              distributionProportion: "",
              editable: "",
              remarks: "",
              transactionBudget: "",
              unUsedBudget: "1",
              usedBudget: "",
            },
          ],
        },
        {
          createUser: " ",
          numberOfPeriods: "",
          pId: " ",
          projectExpDetails: [
            {
              cId: "",
              cName: "",
              distributionProportion: "",
              editable: "",
              remarks: "",
              transactionBudget: "",
              unUsedBudget: "2",
              usedBudget: "",
            },
            {
              cId: "",
              cName: "",
              distributionProportion: "",
              editable: "",
              remarks: "",
              transactionBudget: "",
              unUsedBudget: "2",
              usedBudget: "",
            },
          ],
        },
        {
          createUser: " ",
          numberOfPeriods: "",
          pId: " ",
          projectExpDetails: [
            {
              cId: "",
              cName: "",
              distributionProportion: "",
              editable: "",
              remarks: "",
              transactionBudget: "",
              unUsedBudget: "3",
              usedBudget: "",
            },
            {
              cId: "",
              cName: "",
              distributionProportion: "",
              editable: "",
              remarks: "",
              transactionBudget: "",
              unUsedBudget: "3",
              usedBudget: "",
            },
          ],
        },
      ],
    };
  },
  created() {
    this.setM(1,1,"unUsedBudget","test修改")
    console.log(JSON.stringify(this.array, null, "  "));
  },
  methods: {
    setM(a, index, col, value) {
      this.$set(this.array[a]['projectExpDetails'][index],col,value)
    }
  },
};
</script>