Checkbox 如何使用Vuetify选择多个复选框？

我们已经用Vue.js和Firebase构建了一个应用程序，其中jobs是我们数据库中的一个节点。添加事件时，我们希望包括该事件可用的作业。在我们的“添加事件”布局中，我包含了数据库中所有作业的复选框。我们希望能够选择相关的工作

它的设置方式是，如果只检查一个作业，效果会很好，但我们通常需要包括5-10个作业

如何更改代码，以便一次选择多个作业

<v-list-tile v-for="(job, index) in jobs" :key="job.title">
              <v-list-tile-content>
                <v-checkbox
                  :key="job.title"
                  :label="job.title"
                  :value="job.title"
                  v-model="checkboxes[index].checked">
                </v-checkbox>
              </v-list-tile-content>
            </v-list-tile>

。。。vuex：

created () {
this.jobs = this.$store.getters.loadedJobs
},

---

使用

v-for

中的索引跟踪选中的框。以下内容应该可以帮助您开始：

<v-list-tile v-for="(job, index) in items" :key="job.title">
    <v-list-tile-content>
        <v-checkbox :value="job.title" 
                    :key="job.title"
                    :label="job.title"
                    v-model="checkboxes[index].checked">
        </v-checkbox>
    </v-list-tile-content>
</v-list-tile>

export default {
  data () {
    return {
      checkboxes: [],
      jobs: []
    }
  },
  computed: {
    items () {
      this.checkboxes = this.jobs.map(job => {
        return {
          checked: false
        }
      })
      return this.jobs
    }
  },
  created() {
    this.$nextTick(() => {
      this.jobs = [
      {
        L9cWVNxnQMfumDkUxxp: {
          title: "job 1"
        }
      },
      {
        L9cWVNxnQMfumDkUxp: {
          title: "job 2"
        }
      },
      {
        L9cWVNxnQMfumDkxxp: {
          title: "job 3"
        }
      }]
    })
  }
}

导出默认值{
数据（）{
返回{
复选框：[]，
职位：[]
}
},
计算：{
项目（）{
this.checkbox=this.jobs.map（job=>{
返回{
勾选：假
}
})
把这个还给我，乔布斯
}
},
创建（）{
这个.$nextTick（（）=>{
这是1.jobs=[
{
L9cWVNxnQMfumDkUxxp：{
标题：“工作1”
}
},
{
L9cWVNxnQMfumDkUxp：{
标题：“工作2”
}
},
{
L9cWVNxnQMfumDkxxp：{
标题：“工作3”
}
}]
})
}
}

工作小提琴：

---

谢谢。。。这会出现控制台错误：“无法读取未定义的”Move

this.checkboxes=Array.fill（{checked:false}，this.jobs.length）的属性'checked'

到

created（）

hook-insteadSame问题。。。TypeError：无法读取undefinedOkay的属性“checked”，这是一个很大的帮助，但我仍然无法通过从Vuex存储加载数据来让它工作。我已经用fiddle和vuex的mashup更新了代码

created () {
this.jobs = this.$store.getters.loadedJobs
},

<v-list-tile v-for="(job, index) in items" :key="job.title">
    <v-list-tile-content>
        <v-checkbox :value="job.title" 
                    :key="job.title"
                    :label="job.title"
                    v-model="checkboxes[index].checked">
        </v-checkbox>
    </v-list-tile-content>
</v-list-tile>

export default {
  data () {
    return {
      checkboxes: [],
      jobs: []
    }
  },
  computed: {
    items () {
      this.checkboxes = this.jobs.map(job => {
        return {
          checked: false
        }
      })
      return this.jobs
    }
  },
  created() {
    this.$nextTick(() => {
      this.jobs = [
      {
        L9cWVNxnQMfumDkUxxp: {
          title: "job 1"
        }
      },
      {
        L9cWVNxnQMfumDkUxp: {
          title: "job 2"
        }
      },
      {
        L9cWVNxnQMfumDkxxp: {
          title: "job 3"
        }
      }]
    })
  }
}