Can I use modals with input parameters?



  • 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



  • Hello Johannes,

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

    Eleina



  • 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



  • @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



  • 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



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