循环外如何通过 v-model 控制列表统一变化

Question

问题：如下图，在这个demo中上下两部分分别是一个列表和一个统计的输入框，目前能做到每个子项可以选择各自的值，但是现在希望下面的输入框能控制所有的值，比如输入10，所有的子项都可以得到10。

目前代码结构如下，如果有问题还请说一下：

<div  class="test">
  <ul>
      <li class="eachItem" v-for="(item,index) in summaryArr" :key="index">
        <div class="header-wrapper">
          <span class="title">XXXXX</span>
          <span class="delete" @click="deleteForItem(index)">
            <i class="iconfont icon-garbage"></i>
          </span>
        </div>
        <div class="content-wrapper">
          <div class="item">
            <div class="item-money">setMoney</div>
            <input class="input-item" placeholder="10-5,000" readonly v-model="moneyArr[index]"
                   @click="toggleInput(index)">
            <span class="text">getMoney : {{(item.odd * (moneyArr[index] || 0)).toFixed(2) || '0.00'}}</span>
            <div class="selectMoney" v-show="selectedIndex === index">
              <calculate @click="getMoneyByClick($event, index)" @delete="deleteByClick($event, index)"/>
            </div>
          </div>
        </div>
      </li>
    </ul>

    // data 中定义了一个 selectIndex 接收上面的 index
    <div class="single">
      <div class="text">single :</div>
      <div class="number">X {{this.summaryArr.length}}</div>
      <label>
        <input class="input-odds" type="number" placeholder="10-5,000" readonly v-model="moneyArr[selectedIndex]"
               @click="toggleInput">
        <div class="selectMoney2" v-show="selectedIndex">
          <calculate @click="getMoneyByClick($event, selectedIndex)"
                           @delete="deleteByClick($event, selectedIndex)"/>
        </div>
      </label>
    </div>
  </div>

// 用空数组占位
created() {
      this.summaryArr.forEach(item => {
        this.moneyArr.push('')
      })
    },

data(){
    return {
            selectedIndex: 0,
            moneyArr: [],
          }
}

Answer 1

计算属性？

Answer 2

我自己解决啦~ 是通过 watch 观测 外层输入的值，然后 push 到 moneyArr 中，外层的 v-model="setEachMoney"，如下是代码部分：

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