Question

我有一个动态的复选框列表。每当我点击复选框时，它就被绑定到数据数组。索引作为顶级公司名称提供。但是当我记录数组时，数组显示为空。但是，如果我遍历它并再次登录，它会显示值。在JS中，我们无法直接设置数组索引。那是问题吗？代码：

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)
        temp = []
        for (i in this.checked_company) {
            console.log(i)
        }
    }

}
});
<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="result.id">
          <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>

js fiddle：https://jsfiddle.net/Lbkx5zdt/

Answer 1

您将checked_company声明为数组，但您将其视为对象checked_company[result.key]

如果要将所有已检查的公司密钥保存在数组中，则复选框代码应为

<input type="checkbox" :value="result.key" v-model="checked_company">

演示：https://jsfiddle.net/ittus/9jya1gas/

Answer 2

我看到你似乎缺少几个div标签

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<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="result.id">
              <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>

这使得vuejs不知道范围

Answer 3

我不确定这会是什么问题，但你检查了这个问题吗？＆＃39;是指正确的对象？您可以将变量分配给新的Vue并全局引用该对象。希望它有所帮助。

为什么vuejs数组显示为空，即使它不是？

3 个答案: