vue中如何给两个ul中的li添加相同的点击事件，但是不互相影响

Question

想给两个Ul中的li都添加一个点击添加class的功能，现在的代码点击一个ul中的li,添加了属性，但是另一个ul中相同下标的li也添加了该属性，请问应该怎么写让两个ul互不影响呢
代码如下：
html:

        <div v-for="items in goodsstandardele">
            <div v-if="items.standarddata[0].url==''" class="species">
                <h5>{{items.standardlabel}}</h5>
                <p>
                    <span @click="color($index)" :class="{colorDorderRed: $index==colorred}" v-for="(gd,$index) in items.standarddata">{{gd.desc}}</span>
                </p>
            </div>
            <div v-else class="goods-color">
                <h5>{{items.standardlabel}}</h5>
                <ul>
                    <li @click="color($index)" v-for="(gd,$index) in items.standarddata">
                        <img :class="{colorDorderRed: $index==colorred}" :src="gd.url" alt="">
                        <p>{{gd.desc}}</p>
                    </li>
                </ul>
            </div>
        </div>

js代码：

        color(index){
            this.colorred = index;
          }

效果是下面这样的：

现在点击白色就跳到10，蓝色就是5，不能交叉选择……刚开始学习不太懂，希望大神们帮帮忙，谢谢！

Answer 1

为什么要操作节点呢？你到data里面添加一个slect属性，赋值为空（我不知道你说的点击一个ul下的某个li，另一个ul下的某个li也要添加class是什么意思，它们两者的联系是索引对应还是什么意思，姑且按照索引一一对应的方式吧），然后你两个ul内的li肯定是v-for循环绑定的吧，在每个li上加上一个绑定事件@click="tab_index(index)"，传如当前li的索引参数index，再给循环的li绑定你要添加的那个class类名，：class="{‘sel’:select == index}",然后,methods内tab_index方法内这样：
tab_index:function(e){

vm.select = e;

}
看看是你想要的不

Answer 2

你把索引传到函数去，根据索引来判断不就ok了

Answer 3

代码怎么写的，贴出来看看