vue 關(guān)于取值的問題

我根據(jù) coupon.list來循環(huán)類名為cash-coupon的div 在每個cash-coupon下面都有一個input復選框開始都是未選中狀態(tài)
我需要判斷哪些復選框被選中了然后獲取所有被選中復選框的cash-coupon 再通過cash-coupon獲取里面類名為lilv的文本值以及屬性為data-money和data-deadline的屬性值,
還需要獲取所有選中復選框的value值
這個我要怎么做呢如果之前是用jq的話就可以弄直接獲取所有選中復選框再獲取父元素cash-coupon,再通過cash-coupon查看類名lilv以及屬性名data-money的元素獲取相應的值

      <div class="cash-top">
        <div class="checkbox">
          <input type="checkbox" class="regular-checkbox big-checkbox" :value="val.id">
          <label for="" id=""></label>
        </div>
        <div class="left"><span class="lilv">{{val.amount}}</span>%</div>
        <div class="right">
          <p>加息券</p>
          <p 
            v-if="val.minAmountCondition==''">
            最高投資金額
            <i :data-money="val.maxAmountCondition">{{val.maxAmountCondition}}</i>元
          </p>
          <p 
            v-if="val.minAmountCondition!='' && val.maxAmountCondition!=''">
            投資金額
            <i :data-money="val.maxAmountCondition">{{val.minAmountCondition}}-{{val.maxAmountCondition}}
            </i>元
          </p>
          <p 
            v-if="val.periodConditionUnit==0 && val.maxPeriodCondition==''">
            適用于≥
            <i :data-deadline="'+minPeriodCondition + '-' + maxPeriodCondition+ '">
              {{val.minPeriodCondition}}
            </i>天投資期限理財產(chǎn)品
          </p>
          <p 
            v-if="val.periodConditionUnit==0 && val.maxPeriodCondition!='' && val.minPeriodCondition!='' && val.minPeriodCondition!=val.maxPeriodCondition">
            適用于
            <i :data-deadline="'+minPeriodCondition + '-' + maxPeriodCondition+ '">{{val.minPeriodCondition}}-{{val.maxPeriodCondition}}
            </i>天投資期限理財產(chǎn)品
          </p>
          <p 
            v-if="val.periodConditionUnit==0 && val.maxPeriodCondition==val.minPeriodCondition">
            適用于
            <i :data-deadline="'+minPeriodCondition + '-' + maxPeriodCondition+ '">{{val.minPeriodCondition}}</i>
            天投資期限理財產(chǎn)品
          </p>
          
        </div>
      </div>
      <div class="cash-bottom"> 有效期：<i>{{val.createTime | formatTime('YMD')}}</i>至<i>{{val.endTime | formatTime('YMD')}}</i></div>

回答

編輯回答

熟稔

vue關(guān)于復選框的使用
首先data里設(shè)置個屬性 checkedValues:[]
input里加個v-model="checkedValues":

<input type="checkbox" class="regular-checkbox big-checkbox" :value="val.id">

這樣當你勾選這個checkbox，就會把 val.id值 push進checkedValues這個數(shù)組
取消勾選則會相應的刪去checkedValues里的這個value
再通過計算屬性就可以把所有勾選了的 coupon.list 里的元素摘出來：

computed:{
    checkedItemList:function(){
        return this.coupon.list.filter(function(item){
            //循環(huán)coupon.list，判斷item.id在不在this.checkedValues這個數(shù)組里
            return this.checkedValues.indexOf(item.id) !== -1
        })
    }
}

然后你想要的data-money和data-deadline就可以從this.checkedItemList里的每一項找到
話說data-money這種是過去在頁面緩存數(shù)據(jù)的方式
用了mvvm框架就要換個思考和操作方式了~

2018年4月21日 08:02

編輯回答