VueJs - Element UI：如何更改活动类 el-radio

【问题标题】：VueJs - Element UI : How to change active class el-radioVueJs - Element UI：如何更改活动类 el-radio
【发布时间】：2018-07-09 10:52:20
【问题描述】：

我想在点击 el-radio 时更改 li 类成为活动类列表，并且当活动背景类列表为蓝色时。

这是我的代码：

ul class="list-class">
    <li v-for="(item, index) in dataList" :key="index">
      <div class="row">
        <div class="col-md-1">
          <el-radio v-model="radio" :label="item.id">
            <span></span>
          </el-radio>
        </div>
        <div class="col-md-11">
          {{ item.name }}
        </div>
      </div>
    </li>
  </ul>

这是我的小提琴：https://jsfiddle.net/dede402/38mn5y9q/

【问题讨论】：

标签： list vuejs2 radio-button element-ui

【解决方案1】：

将:class="{'active':radio===item.id}" 添加到 v-for 迭代器

  <template>
      <ul class="list-class">
        <li v-for="(item, index) in dataList" :key="index" :class="{'active':radio===item.id}">
          <div class="row">
            <div class="col-md-1">
              <el-radio v-model="radio" :label="item.id">
                <span></span>
              </el-radio>
            </div>
            <div class="col-md-11">
              {{ item.name }}
            </div>
          </div>
        </li>
      </ul>
      <pre class="pre-item">radio = {{ radio }}</pre>
  </template>

小提琴：https://jsfiddle.net/38mn5y9q/4/

【讨论】：