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

Question

我想在单击 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/

Answer 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/