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

站长

2024年07月17日 09:57 · 阅读数 15

后端猿强学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>

1个回答

test

2024-07-17

主要是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>

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

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容