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

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

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

Yeah I just tried it out. Like in the video (https://egghead.io/lessons/load-components-when-needed-with-vue-async-components) the network tab shows that it loads the component only if you click on the route.

Thank you for this great link. I am a little confused though. I thought I was using lazy loading already in my vue-router?

function load(compName: string) {
return () => import(./components/${compName}.vue).then(m => m.default)
}

I will look into webpack 3.

I cannot use any higher version of Vue than 2.2.1 because I am using a version by Daniel Rosenwasser which supports TypeScript in a much nicer and easier way (https://github.com/DanielRosenwasser/typescript-vue-tutorial). Hopefully this will be supported with the new Vue 2.5.

I am sure this is possible. With webpack I get the component list by listing all files recursively in one folder. If I say that every subfolder will mark a nested route then that could be one way.

The way it works right now is limited. You are right.

Yes that is what I do. I know right? I have not seen anybody doing this before but I thought I would try it and it actually works. It saves time

It is working with { path: ‘/forum’, component: () => import(’./components/Forum.vue’).then(m => m.default) }

Thank you for this advise. I am using the load function in a similar way:

compNamesFromWebpack.forEach(element => {
var compName = element.replace(’.vue’, ‘’)
var compDomainName = /${compName.toLocaleLowerCase()}
console.log(Created route ${compDomainName})
routes.push({ path: compDomainName, component: load(compName) })
});

This way webpack delivers the component names under src/components and the router creates routes automatically. Everyt time you create a new component the route will be created as well.

Hello guys,

first of all I want to say that quasar framework rocks!
I used the old version with my own webpack config and without the play app integration and lazy loading worked fine.

Now I do want to use version 0.14 and the webpack config so I can use the play app but I cannot get the lazy loading to work anymore.

{ path: ‘/forum’, component: Forum} // is working
{ path: ‘/forum’, component: () => import(’./components/Forum.vue’) } //is not working

I get the error message: Failed to mount component: template or render function not defined.

I am almost sure that it is my webpack configuration since I used the same code for the vue-router in the older version.
The link to the github solution is: (https://github.com/JDrechsler/Problem-with-vue-router)

If anybody could help me or point me in a direction I would be very grateful.

Thank you in advance

Johannes