vue.js 从上个页面带过来的数组与现在的列表数组比较，如果key值相同，则添加颜色，点击可删除颜色

Question

问题1：页面初始化时，需要判断arr2数组的值是否和arr数组的值有相同的，如果相同则添加对应的背景颜色
arr2:[

{key:'年底双薪',text:'年底双薪'},
{key:'包吃',text:'包吃'},
{key:'高温补贴',text:'高温补贴'},
{key:'创业公司',text:'创业公司'},

]
图片

问题2：当点击列表里某个值(如五险一金)，则添加对应的背景颜色，再次点击可以删除这个背景颜色

问题链接在这里
https://jsfiddle.net/xiyanzi/...

Answer 1

<div id="app">
  <label
      v-for="item in arr" :class="{'active': list.indexOf(item.key) > -1}">
    {{ item.text }}
    <input type="checkbox" v-model="list" :value='item.key'/>
  </label>
</div>

去掉了onClick方法, css加了个input{display:none},
初始化代码如下:

mounted: function() {
    let self = this;
    let arrKeys = self.arr.map((item) => item.key),
        arr2Keys = self.arr2.map((item) => item.key); 
    self.list = arr2Keys.filter((item) => arrKeys.indexOf(item) > -1);
}