Vuetify에서 여러 개의 확인란을 선택하는 방법은 무엇입니까?

Vuetify에서 여러 개의 확인란을 선택하는 방법은 무엇입니까?

Vue.js와 Firebase를 사용하여 앱을 구축했습니다.여기서 작업이 db의 노드입니다.이벤트를 추가할 때 해당 이벤트에 사용할 수 있는 작업을 포함하려고 합니다."Add Event" 레이아웃에 DB에 있는 모든 작업의 확인란을 포함했습니다.우리는 관련 직업을 선택할 수 있기를 원합니다.

셋업 방식으로는 1개의 작업만 체크하면 효과가 있습니다만, 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/

언급URL : https://stackoverflow.com/questions/49761131/how-to-select-multiple-checkboxes-with-vuetify