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

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

它的设置方式非常有用，如果您仅检查一项工作，但是我们经常需要包括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>

...

export default {
data () {
    return {
    title: '',
    description: '',
    startDate: '',
    endDate: '',
    checkboxes: [],
    jobs:[],

...

computed: {
items () {
  this.checkboxes = this.jobs.map(job => {
    return {
      checked:false
    }
  })
    return this.jobs
},
jobs () {
  return this.jobs
}
},

... 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"
        }
      }]
    })
  }
}

工作提琴:

https://jsfiddle.net/6yarqagf/5/