I'm building an app with Quasar/Vue2.5 and the checkbox situation is pretty wonky. I'm going the traditional Vue route and I'm at the point right now where I'm grabbing the checked value and pushing to an empty array, but the value is being overwritten each time I add a new one. I also need the ability to check many values at once and push all of those to the array for a bulk api call. Here's the vue code:
<template>
<div :class="listStyle">
<q-fab color="primary" icon="keyboard_arrow_down" direction="down"
class="fixed" style="right: 18px; top: 138px">
<q-fab-action color="primary" @click="getBulkChoice"
icon="assignment" />
</q-fab>
<template>
<q-item-separator></q-item-separator>
<q-item link :to="itemLink">
<q-item-side v-if="address.parent_addresses_id === null"
:icon="buildingIcon"></q-item-side>
<q-item-main>
<q-item-tile label v-if="address.parent_addresses_id ===
null"></q-item-tile>
<q-item-tile sublabel v-else></q-
item-tile>
<q-item-tile style="padding: 5px;" sublabel>
<q-chip v-for="(chip, index) in address.chips" small style="margin: 5px;" :color="chip.displayColor" :key="index"></q-chip>
</q-item-tile>
</q-item-main>
</q-item>
<q-item-side>
<q-item-tile>
<!-- <q-checkbox v-model="bulkChecked" label="One" color="secondary" val="address.id" @click="check($event)" /> -->
<input
id="checked"
type="checkbox"
v-model="bulkChecked"
:value="address.id"
@click="check($event)"
color="primary"
:checked=true
>
</q-item-tile>
</q-item-side>
</template>
<script>
export default {
data () {
return {
bulkChecked: [],
bulkOptions: false
}
}
},
methods: {
check: function (e) {
if (e.target.checked) {
this.bulkChecked.push(e.target.value)
console.log('CHECK meth: ', this.bulkChecked)
}
},
getBulkChoice: function (e) {
console.log(this.bulkChecked)
if (e.target.checked) {
this.bulkChecked.push(e.target.value)
console.log('CHECK meth: ', this.bulkChecked)
}
this.$q.dialog({
title: 'Bulk Visit',
ok: true,
cancel: true,
options: {
type: 'radio',
model: 'opt1',
inline: true, // optional
items: [{
label: 'Flyer',
value: 'Flyer',
icon: 'mail',
color: 'positive'
},
{
label: 'Construction',
value: 'Construction',
color: 'positive'
},
{
label: 'Promo',
value: 'Promo',
color: 'positive'
}
]
}
})
.then(data => {
console.log(data)
})
.catch(() => {
this.$q.notify({ message: 'Cancelled', color: 'negative' })
})
}
}
}
</script>
The starting point is a list of items from state, listed with a v-for with empty checkboxes. The q-fab (floating action button) would fire off the getBulkChoice
method, which fires off a modal with three radio selections.
Ultimately I need to choose one of the three radio options, click ok and default select true all of the checkboxes. At this point the user could send the array of checkbox values (address.id
) with the single choice selection from the modal to the backend OR deselect particular list items that will not be included in the api post. As you can see here, I've attempted logic in both a check method and in the getBulkChoice
method itself and I feel confident it will require using both methods, but not as I have written here.
Aucun commentaire:
Enregistrer un commentaire