What is opened set to in data? Set it to true and the dialog should be open. Also, all you need to do with the button is set opened back to false.

<q-btn color="primary" @click="opened = false">Close</q-btn>

Scott

Hmm…Have a look at the file being called for and the actual file. Capitalization does make a difference.

Scott

I’d say it has nothing to do with webpack directly. For some reason the C_login.vue file can’t be found. Are you sure it is uploaded to the server? Is the path correct?

Scott

I’d say in general, you should avoid using parenthesis in files names.

Scott

This seem to have worked.

https://codepen.io/smolinari/pen/MdXyJR

Scott

I would have thought conditional rendering would be better in situations, where their needs to be a swap out of the element or component, depending on whatever is happening within the page, like for user interactivity. But, yeah. you could use v-ifs to determine what to show too. I think it would be a bit more verbose or rather “less clean” though. I’m a fan of putting as little logic in the templates as possible.

Oh, and if you are going to be using this kind of image swap technique in other areas of your app, you really should create your own component and then you could even use computed props.

And if all of that is making your head spin, I’d like to invite you to take this course on Vue: https://www.udemy.com/vuejs-2-the-complete-guide

Scott

@Julia - But that would be offering a fish. We want to teach you how to fish.

And, @metalsadman 's example gives you everything you should need to know. If you don’t understand, then you need to learn more about Vue’s slotting capabilities.

https://vuejs.org/v2/guide/components-slots.html

Nonetheless, here is a simpler example.

https://codepen.io/smolinari/pen/pmVvrK

I used QBadge in the slot, but you can insert an image and use a method to determine the image you want.

Scott

The only reason you might want to hash css classes is to make the final bundle size the user gets smaller. And unless you are building some large app like Facebook or Googlemail, your gains will be minimal. Why waste time with something practically worthless, when you can be using that time to build something great, and if it does get big, you can worry about css size and obfuscation at that time?

Scott

No. There is no CSS obfuscation in Quasar.

Scott

So, are you saying, Quasar is going to put in a back door or some other security leak and you want to make sure Quasar doesn’t notice you are using Quasar to avoid Quasar hacking into your site? That’s ridiculous. Sorry, your reasoning on “hiding” a possible attack vector makes no sense.

And where does React obfuscate its CSS naming automatically? It doesn’t. So, stop saying that. And, if you have gotten React (or rather Webpack) to obfuscate CSS class names, then you should have the knowledge to do the same with Vue/ Quasar.

I don’t have an answer for you, as long as you keep saying renaming the CSS is for security reasons. I won’t offer you something under the pretense of better security, when in fact, it would be far from being more secure.

Scott