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?


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.