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

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

1. {
   
2.     "errcode": 0,
   
3.     "msg": "获取成功",
   
4.     "data": {
   
5.         "red_list": [
   
6.             1,
   
7.             2,
   
8.             3,
   
9.             4,
   
10.             5,
    
11.             6,
    
12.             7,
    
13.             8,
    
14.             9
    
15.         ],
    
16.         "red_selected": [
    
17.             "2",
    
18.             "5"
    
19.         ]
    
20.     }
    
21. }

复制代码

请教大神在模板中该如何判断 red_list 里的某个数是在 red_selected 数组里的呢？
我现在的写法如下(重点关注 class 属性)，但是不行：

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

复制代码

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

1. <script>
   
2. export default {
   
3.   data(){
   
4.     return {
   
5.       red_list: [],
   
6.       red_selected: []
   
7.     }
   
8.   },
   
9.   //...
   
10.   methods:{
    
11.     loadData(){
    
12.       //...
    
13.       fetchAPI(params).then(res=>{
    
14.         this.red_list = res.data.red_list
    
15.         this.red_selected = res.data.red_selected.map(n=>Number(n))  // 字符串转数字类型
    
16.       })
    
17.     }
    
18.   }
    
19. }
    
20. </script>

复制代码

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

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

复制代码

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