Vue.js数组明明有值却显示为空的问题排查

你遇到的问题核心在于错误地用数组来存储以字符串为键的选中状态，这既不符合JavaScript数组的设计逻辑，也和Vue的响应式机制不兼容。

为什么会出现“打印为空但遍历有值”的情况？ #

JavaScript里的数组本质是特殊的对象，它只认0、1、2...这类数字型索引。当你用企业名称（字符串）作为“索引”给数组赋值时，比如checked_company["a"] = true，其实是给这个数组对象添加了自定义属性，而不是数组的元素。

• 直接console.log(this.checked_company)时，浏览器只会显示数组的数字索引元素，所以看起来是空的；
• 但用for...in遍历的时候，会遍历对象的所有可枚举属性（包括你添加的字符串键属性），所以能看到对应的值。

另外，Vue的响应式系统对数组的追踪是针对数字索引和数组方法（比如push、splice）的，用字符串作为索引添加属性时，Vue无法自动追踪这些变化，还可能导致视图更新不及时。

正确的解决方案：用对象替代数组存储选中状态 #

把checked_company改成对象，因为对象天然适合用字符串作为键来存储键值对，完美匹配你的需求：

修改后的代码

new Vue({
  el: "#app",
  data: {
    topCompanies: [
      { "doc_count": 221, "key": "a" },
      { "doc_count": 175, "key": "b" },
      { "doc_count": 149, "key": "c" },
      { "doc_count": 126, "key": "d" },
      { "doc_count": 116, "key": "e" },
      { "doc_count": 115, "key": "f" },
      { "doc_count": 94, "key": "g" },
      { "doc_count": 89, "key": "h" },
      { "doc_count": 75, "key": "h" },
      { "doc_count": 72, "key": "i" }
    ],
    collapse1: false,
    checked_company: {} // 这里改成对象
  },
  methods: {
    getResultsByCompany(result) {
      console.log(this.checked_company); // 现在能正常看到所有选中状态了
      // 遍历对象的键值对可以用Object.entries更清晰
      for (const [key, value] of Object.entries(this.checked_company)) {
        if (value) { // 只打印选中的企业
          console.log(`选中的企业：${key}`);
        }
      }
    }
  }
});

模板部分不需要修改，因为Vue支持用对象[键]的方式绑定v-model：

<div id="app">
  <div id="sidebar-wrapper">
    <button class="collapsible" @click="collapse1=!collapse1">Top Companies</button>
    <div v-if="collapse1" class="content" v-bind:style="{'display': 'block'}">
      <div class="list-group" v-for = "(result,index) in topCompanies" :key="index">
        <label class="container check-an" :id="index" @change = "getResultsByCompany(result.key)">
          {{ result.key}}({{result.doc_count }})
          <input type="checkbox" v-model="checked_company[result.key]">
          <span class="checkmark"></span>
        </label>
      </div>
    </div>
  </div>
</div>

额外优化提示 #

1. 注意你的topCompanies里有两个key: "h"的项，这会导致两个复选框绑定到同一个对象属性，点击其中一个另一个也会同步选中/取消，如果你需要区分它们，得给每个项一个唯一的key值；
2. 遍历对象时，用Object.entries()比for...in更直观，能同时拿到键和值，还能过滤掉原型链上的属性。

内容的提问来源于stack exchange，提问作者phantom