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

Question

我们使用 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>

...

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
},

Answer 1

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

工作 fiddle :

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