Question

我们使用Vue.js和Firebase构建了一个应用，其中作业是我们数据库中的一个节点。当我们添加事件时，我们希望包含该事件可用的作业。在我们的＆＃34;添加活动＆＃34;布局，我已经包含了DB中所有作业的复选框。我们希望能够选择相关的工作。

它的设置方式，如果你只检查一项工作，它会很有效，但我们经常需要包括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"
        }
      }]
    })
  }
}

工作小提琴：

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

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

1 个答案: