Can I use modals with input parameters?

[JDrechsler]

Hey guys,

I have a list of bills and via click event I want to open a modal allowing me to edit the clicked bill. I could just do something like this:

<q-item v-for="(bill, index) in bills">
    <q-item-side @click="clickedBill=bill;$refs.modalEditBill.open()"></q-item-side>
</q-item>

Then in my modal I could access clickedBill. Is it possible to do something like that instead?

<q-item v-for="(bill, index) in bills">
    <q-item-side @click=$refs.modalEditBill(bill).open()"></q-item-side>
</q-item>

This way I do not need the clickedBill variable.

Thank you in advance!

Johannes

[eleina]

Hello Johannes,

Try this: $refs.modalEditBill.open(clickedBill = bill)
Hope this is what you needed!

Eleina

[JDrechsler]

Hi Eleina,

I tried it using:

<q-item v-for="(bill, index) in bills">
    <q-item-side @click=$refs.modalEditBill.open(clickedBill = bill)"></q-item-side>
</q-item>

and then in my modal I want to use the variable ‘clickedBill’

<q-modal ref="modalEditBill">
    <div>Test {{clickedBill.title}}</div>
    <q-btn color="negative" class="pull-left" @click="$refs.modalEditBill.close()">Close</q-btn>
</q-modal>

That does not work without declaring that variable clickedBill before. I get the warning:

[Vue warn]: Property or method “clickedBill” is not defined on the instance but referenced during render.

I just want to pass bill or index (<q-item v-for="(bill, index) in bills">) to the modal I am opening. Do you know if that is possible?

Thank you

Johannes

[eleina]

@JDrechsler
Did you declare the clickedBill in the data () method of Vue? Like this:

export default { 
    data () {
        return: {
            clickedBill: ''
        }
    }
}

What you’re trying to do should be possible, because I have the same kind of code in my application.
Hope it helps!

Eleina

[JDrechsler]

Hi Eleina,

if I do that then it works yes. Before I used a dialog like this:
v-for=“biller in billers”
button -> @click="showEditDialog(biller)

showEditDialog(biller: Biller) {
		Dialog.create({
			title: biller.title,
			form: {
				title: {
					type: 'text',
					label: 'name',
					model: biller.title
				},
				amount: {
					type: 'number',
					label: 'amount',
					model: biller.amount,
					min: 0,
					max: 9999
				},
                  .....

Billers is an array that is declared in the data() method of Vue.
There was no need to have a variable like clicked or selectedBiller. Is it possible to do the same with a modal? Open it and at the same time passing the biller and index from the for loop?

Thank you

Johannes

[arjanski]

@JDrechsler Did you end up finding a solution for your last question about passing the biller and index?