How to unify the change outside the loop through the v-model control list

question: as shown in the following figure, the upper and lower parts of this demo are a list and a statistical input box respectively. At present, each sub-item can choose its own value, but now it is hoped that the following input box can control all values, such as entering 10, and all sub-items can get 10.

image.png

the current code structure is as follows. If you have any questions, please tell us:

// 
created() {
      this.summaryArr.forEach(item => {
        this.moneyArr.push("")
      })
    },

data(){
    return {
            selectedIndex: 0,
            moneyArr: [],
          }
}
Mar.02,2021

calculation properties?


I solved it myself ~ is to observe the input value of the outer layer through watch, and then push to moneyArr, the outer VMI model = "setEachMoney" , this is the code part:

watch: {
      setEachMoney(val) {
        this.moneyArr = []
        this.summaryArr.forEach(item => {
          item.money = val
          this.moneyArr.push(val)
        })
      }
    }
Menu