Vue中點(diǎn)擊radio給其對(duì)應(yīng)父級(jí)添加class

我試了下其實(shí)是可以的，雖然 vue 不建議這么做。。。可以試試把 checkedTime 改成下面這樣

checkedTime (event){
      let memberTimes = event.target.value;
      this.memberTimes = memberTimes;

     // this.isChecked = true ;
     Array.prototype.slice.call(event.target.parentNode.parentNode.children)
          .forEach(function (e) {
        e.classList.remove("item active")
        })
      event.target.parentNode.setAttribute("class","item active")
      if(memberTimes==1){
            this.memberPrice ="1288.00";
        }else if(memberTimes == 2){
            this.memberPrice ="2189.60";
        }else{
           this.memberPrice ="2704.80";
        }
      // console.log(memberTimes);
    },

把那個(gè)isChecked寫在data里面，然后點(diǎn)擊事件的時(shí)候修改值就可以了，父類的class那里可以寫成三目運(yùn)算:class="isChecked == false ? '':'active'"。那個(gè){'active':isChecked}是什么意思？能給我講講么

最后是這樣解決的!:

   <div class="items">
                <div class="item" v-for="(item,index) in items" :class="{active:index==isActive}" :key="item.id" >
                    <div class="item-left">{{item.times}}<span>{{item.discount}}</span></div>
                    <div class="item-right">￥<span>{{item.price}}</span></div>
                    <input type="radio" name="pay-time-radio" class="pay-time-radio"  v-model="param"  :value="item.id" @click="checkedTime($event,index)"/>
                </div>
            </div>

這個(gè)地方，最好不要用 js，用 CSS 會(huì)容易很多。原理是 :checked + label，寫出來大概這樣：

<div class="items">
  <input type="radio" class="hide" name="pay-time" v-model="payTime" id="pay-time-1" value="1">
  <label for="pay-time-1">
    <div class="item-left">一年會(huì)員<span>無折扣</span></div>
    <div class="item-right">￥<span>1288.00</span></div>
  </label>
  <input type="radio" class="hide" name="pay-time" v-model="payTime" id="pay-time-2" value="2">
  <label for="pay-time-2">
    <div class="item-left">兩年會(huì)員<span>8.5折</span></div>
    <div class="item-right">￥<span>2189.60</span></div>
  </label>
</div>

CSS 的部分請(qǐng)你參考我的這篇文章：純CSS實(shí)現(xiàn)多選組件。如果你有時(shí)間的話，建議把這個(gè)講堂 寫 CSS 也要開腦洞：萬能的 :checked + label 也看一下。

<div class="items">
    <div class="item" v-bind:class="{'active':1 == index}">
        <div class="item-left">一年會(huì)員<span>無折扣</span></div>
        <div class="item-right">￥<span>1288.00</span></div>
        <input type="radio" name="pay-time-radio" class="pay-time-radio"  checked="checked" value="1" @click="checkedTime(1)"/>
    </div>
    <div class="item" v-bind:class="{'active':2 == index}">
        <div class="item-left">兩年會(huì)員<span>8.5折</span></div>
        <div class="item-right">￥<span>2189.60</span></div>
        <input type="radio" name="pay-time-radio" class="pay-time-radio"  value="2" @click="checkedTime(2)"/>
    </div>
    <div class="item" v-bind:class="{'active':3 == index}">
        <div class="item-left">三年會(huì)員<span>7折</span></div>
        <div class="item-right">￥<span>2074.80</span></div>
        <input type="radio" name="pay-time-radio" class="pay-time-radio"  value="3" @click="checkedTime(3)"/>
    </div>
</div>

//================
data(){
 return {
    index : 1,
}
},
methods: {
     checkedTime(value){
         this.index =value;
    }
}


//============================================================

<div class="items">
                <div class="item" v-for="(item,index) in items" :class="{active:item.isChecked}" :key="item.id" >
                    <div class="item-left">{{item.times}}<span>{{item.discount}}</span></div>
                    <div class="item-right">￥<span>{{item.price}}</span></div>
                    <input type="radio" name="pay-time-radio" class="pay-time-radio"  :checked='item.isChecked' :value="item.id" @click="checkedTime(index)"/>
                </div>
            </div>
            data() {
    return {
      checkedPayValue:'1',
      checkedPayText:"微信支付",
      memberTimes:'',
      memberPrice:1288.00,
      isChecked:false,
      items:[
         {
           id:1,
           isChecked:true,
           times:"一年會(huì)員",
           discount:"無折扣",
           price:1288.00
          },
         {
           id:2,
           isChecked:false,
           times:"兩年會(huì)員",
           discount:"8.5折", 
           price:2288.00
          },
         {
           id:3,
           isChecked:false,
           times:"三年會(huì)員",
           discount:"7折",
           price:3288.00
          },
      ]
    };
            methods:{
    checkedTime (index){
       let obj =Object.assign({},this.items);
        obj.forEach((v) =>{
            v.isChecked = false;
        })
       obj[index]['isChecked'] = true;
       this.items = obj;
        
    },
            }