my items look a little bit too small
for me to be able to see what they are in any detail.
So what I want to do is add a modal
Now, I could do these by pulling up additional windows,
but one of the reasons I like using the Bootstrap framework
is that it makes something like this a lot simpler to do,
and you don't have to worry about bringing up
and managing multiple windows.
and have it also work in your Electron application.
So, you don't have to keep two code bases,
one for the web and one for Electron.
You can just code it as a Bootstrap modal
but I want to show you something that is interesting
about what we get when we work
with our Electron application.
Now, I have the Chrome developer tools
extension for Vue.js,
so I have this little extra item right here
And normally, here I should be able to look at my app,
So, this way of looking at the Developer Tools
doesn't always work
when you are in the Electron application.
extension for Chrome can be found at this URL.
So, let's go back into our application,
and we'll go ahead and close this out.
Let's go ahead and cancel, actually,
the application from running for right now.
So, what I want to do is start working
on adding the ability of keeping track of a new variable,
and this variable is going to keep track
of the image that I want to display
when somebody clicks on one of those catalog items.
So, in the App.vue file, I'm going to add a new variable.
This is going to be called modalPhoto.
And it's going to be set to null to begin with.
So, what I want to do is store the value
of the photo that I want to display in here.
On the product list, I'm going to need to modify the image.
And what I'll do is I'm going to add an event here,
and this is just a view event called click.
When somebody clicks on this thing,
I want to emit in the parent item
an event that I'm going to create
Right, so this just generates an event
and because of how layered I am in my application.
which means it loads different things
the parent is this products.vue file.
and have that event be processed by that parent component.
Again, if you want to take a look
this particular element to receive an additional prop.
because eventually, actually,
what the value of that photo is.
And I'm going to add a style section here.
And this style section is going to target an item
with a class of lowres.
And when somebody rolls over that section,
So, this will change our icon, our pointer,
to something that looks like a little finger
that's going to click on the item.
And so we'll need to add that class into our image, as well.
And then I'll switch over to Products,
I'm also passing along that variable modalPhoto,
So, here's the product-list component.
So, that variable is just sort of going
And now I'll go to the main component, App.vue.
And this is where I'm going to handle
what happens when you click on the element.
and look for that event taking place.
So, setCurrentPhoto is going to be equal to
a local method called setCurrentPhoto,
So, this product-list generates, or emits an event, right.
And we're just trapping that event here in App.vue.
This is going to be a function that receives an item.
of the modalPhoto variable item,
the way that I have, actually, this image is,
I do need to show you this.
In my images folder, I have all these images.
So, all the low resolution versions
are called say apron-binary, right.
And the low resolutions have an _tn.jpg,
the high resolutions are just .jpg.
So, what I'm going to do is just take the name
of the element, which will be the low resolution version.
And then I'm going to remove just the _tn,
and replace it with nothing.
That'll get rid of it.
And that's it.
So, once we click on each one of those elements,
it's going to set the current photo,
which is this modalPhoto variable
that I created in my data.
Right now it has a value of null.
And I'm going to set that to the name of
the low resolution version minus the _tn.jpg.
So, let's go ahead and save that.
And so if I just do an npm run electron:serve,
I'm going to run into that same problem that I saw before,
that the Vue developer tools aren't always
going to know what's going on.
So, if I switch over to Vue.
It actually worked this time,
but sometimes it doesn't quite come up.
So, actually, let's see if it's actually working.
So, we'll click on each one of these.
And when you clicked on one,
notice that it sits not quite, you know,
it still has a value of null.
If I hit the refresh button,
you'll see that it'll get the right value.
And also, whenever I clicked,
I actually generated an event.
And you can see the list of events right here.
Now, if this is not working for you,
something that I do like doing sometimes,
is running this with, instead of npm run electron serve,
I can just run this as a web page,
just by running npm run serve.
And now, it's going to essentially create a website,
and I can preview it by Alt + clicking here,
or I can just go to local host 8080.
And now you can inspect element.
And let's turn this off.
Hit the Vue tab, and now we can see
what's going on here.
So, we'll click on one of these,
and then you see the event.
Sometimes this modalPhoto doesn't update,
so we can hit refresh and we can see that.
When we click on these,
sometimes you got to hit refresh to see it come up,
but it is modifying the modalPhoto variable
and it's generating an event.
So, sometimes between the two different
electron serve and just serve commands,
you can get a more rich debugging experience
when you're working with your applications.