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;$"></q-item-side>

    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>

    This way I do not need the clickedBill variable.

    Thank you in advance!


  • Hello Johannes,

    Try this: $ = bill)
    Hope this is what you needed!


  • Hi Eleina,

    I tried it using:

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

    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>

    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


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


  • 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) {
    			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


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

Log in to reply