vue2.0 点击切换class 不能初始化变量

Question

点击切换class 想让第一个li开始就带有这个class 但是在data里声明时 确显示i:undefined

            <ul>
                <li v-for="(item,index) in diviCat"  @click="clist(item.id,index)" :class="{line: i==index}"></li>                
            </ul>

js

export default{
        data(){
            return{
                i:0,
            }                    
        },
        methods:{
            clist(id,index){    
                    this.i=index;
            }
        },    
       

Answer 1

可以使用三目数组的形式绑定class，例如：:class="[i === index ? line : '']"

Answer 2

:class="i==index?'line':''"

Answer 3

凡是css都请加上引号
:class="[i === index ? 'line ': '']"
或者
:class="{'line ':i===index}"

Answer 4

我的问题是 拿不到i的初始值
不是切换不了class。。。。

我想让i的初始值为0 这样第一个li默认就会有这个class

Answer 5