Vue 拼接变量取值

Question

1.做项目一次获取所有数据，然后通过tab面板依次点击显示列表
返回ret数据如下：
{"code":200,"msg":"查询成功","time":"1543567309","data":
{"a":[{"id":10,"type":"a","qa":"动物提取物"},{"id":5,"type":"a","qa":"化工日化"}],
"d":[{"id":11,"type":"d","qa":"饲料原料"},{"id":7,"type":"d","qa":"21312312"}],
"s":[{"id":9,"type":"s","qa":"植物提取物"},{"id":6,"type":"s","qa":"测试接口数据"}],
"w":[{"id":8,"type":"w","qa":"测试分组数据111"},{"id":4,"type":"w","qa":"医药原料数据"}]}}
vm赋值为 vm.lists = ret.data;
tab 面板标识依次为 a,d,s,w;
点击tab a时即取出vm.lists.a ,由于点击时返回的是下标index，所以取数据做了拼接
设置变量 var tabs = ['a','d','s','w'];

点击取出数据时拼接tabs 即为 vm.lists.tabs[index]; 实际打印出数据为空
但是直接打印 vm.lists.a 有数据
求大佬解释一下原因

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

vm.lists.tabs是取lists中的tabs属性，lists并没有tabs属性，所以返回undefined，然后运行后面的[index]会报错，你这里打印出数据为空也是神奇，改为:vm.lists[ tabs[index] ]