动态改变class，值变了class添加不上

Question

<li v-for="item of statisticsList"
    :key="item.id"
    :class="{'active':statistics===item.id}"
    @click="changeStatistics(item.id)">{{item.name}}</li>

changeStatistics(id){
    this.statistics = id
},

li {
    width: 80px;
    height: 31px;
    background: url("./image/btn-bg.png") no-repeat;
    background-size: 80px 35px;
    display: inline-block;
    position: relative;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    padding-top: 0;
    cursor: pointer;

    &:hover, &.active {
        background: url("./image/btn-bg2.png") no-repeat;
        background-size: 80px 35px;
    }
} 

这里通过改变statistics的值，判断是否与li标签的id相等而去动态添加active类，浏览器中打印出来 statistics的值有改变，但是页面却不渲染，active并没有加上，不知道什么原因

Answer 1

没什么问题啊

https://jsfiddle.net/jamesfan...

Answer 2

组件初始化data里面有没有statistics这个变量。没有就用this.$set

Answer 3

你用了全等===, 看看是不是一个字符串一个是数字，用 == 试试