vue模板中如何判断一个变量值属于另一个变量数组的元素？

Question

后端猿强学VUE，现在接口返回数据如下：

{
    "errcode": 0, 
    "msg": "获取成功", 
    "data": {
        "red_list": [
            1, 
            2, 
            3, 
            4, 
            5, 
            6, 
            7, 
            8, 
            9
        ], 
        "red_selected": [
            "2", 
            "5"
        ]
    }
}

请教大神在模板中该如何判断 red_list 里的某个数是在 red_selected 数组里的呢？

我现在的写法如下(重点关注 class 属性)，但是不行：

<li v-for="item in data.red_list" 
v-on:click="select(item, $event)" :id="`red${item}`" 
:class="[data.red_selected.indexOf(item) === -1 ? 'redC1' : 'redC']">{{item}}
</li>

Answer 1

主要是key的类型匹配不上吧。请求玩完接口的时候，稍微修改一下就可以了。

<script>
export default {
  data(){
    return {
      red_list: [], 
      red_selected: []
    }
  },
  //...
  methods:{
    loadData(){
      //...
      fetchAPI(params).then(res=>{
        this.red_list = res.data.red_list
        this.red_selected = res.data.red_selected.map(n=>Number(n))  // 字符串转数字类型
      })
    }
  }
}
</script>

或者在匹配的时候变更一下类型

<template>
  ...
  <li
    v-for="item in data.red_list" 
    :id="`red${item}`" 
    :class="[red_selected.indexOf(''+item) === -1 ? 'redC1' : 'redC']"
    v-on:click="select(item, $event)" 
  >{{item}}</li>
  ...
</template>

其实最好是接口返回的时候把类型统一。

Answer 2

<li v-for="item in data.red_list"
v-on:click="select(item, $event)" :id="red${item}"
:class="[data.red_selected.includes(item + '') ? 'redC1' : 'redC']">{{item}}
</li>

Answer 3

这样试一下

<li 
v-for="item in data.red_list" 
v-on:click="select(item, $event)" 
:id="`red${item}`" 
:class="data.red_selected.includes(item.toString()) ? 'redC1' : 'redC'"
>{{item}}
</li>