悬赏问答
1回答 198查看
悬赏 1 金币
Chinaboys
后端猿强学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>
复制代码


回答 1 条
吊儿郎当 2022-10-23 12:15:55
主要是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>
复制代码
其实最好是接口返回的时候把类型统一。
您需要登录后才可以回帖 登录 | 注册
Smilies Code
高级模式