VueJs - Element UI : How to change active class el-radio - list

Question

I want to change li class when el-radio is clicked become active class list, and when the active background class list is blue.
here is my code:
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>
and here my fiddle: https://jsfiddle.net/dede402/38mn5y9q/

Answer 1

add :class="{'active':radio===item.id}" to the v-for iterator
<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>
fiddle: https://jsfiddle.net/38mn5y9q/4/