鍍金池/ 問答/HTML/ 循環(huán)外如何通過 v-model 控制列表統(tǒng)一變化

循環(huán)外如何通過 v-model 控制列表統(tǒng)一變化

問題：如下圖，在這個demo中上下兩部分分別是一個列表和一個統(tǒng)計的輸入框，目前能做到每個子項可以選擇各自的值，但是現(xiàn)在希望下面的輸入框能控制所有的值，比如輸入10，所有的子項都可以得到10。

image.png

目前代碼結(jié)構(gòu)如下，如果有問題還請說一下：

<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>
// 用空數(shù)組占位
created() {
      this.summaryArr.forEach(item => {
        this.moneyArr.push('')
      })
    },

data(){
    return {
            selectedIndex: 0,
            moneyArr: [],
          }
}
回答
編輯回答
不歸路

我自己解決啦~ 是通過 watch 觀測 外層輸入的值，然后 push 到 moneyArr 中，外層的 v-model="setEachMoney"，如下是代碼部分：

watch: {
      setEachMoney(val) {
        this.moneyArr = []
        this.summaryArr.forEach(item => {
          item.money = val
          this.moneyArr.push(val)
        })
      }
    }
2018年2月5日 20:43
編輯回答
安于心

計算屬性？

2017年10月1日 06:59