Why my css styling does not work in Vue.js?

Question

I'm new in web development and vue.js. I've tried in many ways to style my code however, it didn't work. Here is my vue.js code example. Please let me know how to style it. I am providing my code implementation here. I created a figure, figcaption, and image markup which acts as a description for my profile and I want to add css to it

<!DOCTYPE HTML>
<html>
    <head>
        <title>v-if If Statements</title>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            .special {background:yellow; border: 1px dotted #fe0000; padding:30px; display:block; text-align:center;}
            .important {font-weight:bold; font-size:30px;}

        </style>
    </head>
    <body>
        <div id="app">
            

<figure>
                <img v-if="profile.pic" :src="profile.pic">

                <div v-if="profile.fname && profile.lname">
                    Profile: {{profile.fname}} {{profile.lname}}
                </div>
                <div v-else>
                    No First or Last name found.
                </div>
                <figcaption>
                    <div v-if="profile.desc">
                        Desc: {{profile.desc}}
                    </div>
                    <div v-else>
                        No description found.
                    </div>

                    <div v-if="profile.bio">
                        Bio: {{profile.bio}}
                    </div>
                    <div v-else>
                        No bio found.
                    </div>
                </figcaption>
            </figure>
        </div>   
        <script>
            var app = new Vue({
                el: '#app',    
                data: {   
                    profile: {
                        fname: "Chris",
                        lname: "Picasso",
                        desc: "Student",
                        bio: "Web developer",
                        pic: "https://i.pinimg.com/custom_covers/222x/85498161615209203_1636332751.jpg"
                    }               
                }  
            });
        </script>

As explained in the answer below, you need to put a class into your HTML elements, defining it in CSS is not self-sufficient by itself, you need to tell to what your style applies. Also, I recommend learning HTML + CSS properly before working with Vue. Will save you quite some time in the long run. — kissu
– kissu, Commented Apr 24, 2022 at 6:31
I removed it since it didn't work for me, but I had it there before like this: <div class="profile_style" v-if="profile.fname && profile.lname" class="important" > Profile: {{profile.fname}} {{profile.lname}} </div> — Frida
– Frida, Commented Apr 24, 2022 at 14:47
Where is profile_style in your code? Also, if you want to apply 2 classes you do it in one go (class="profile_style important"). — kissu
– kissu, Commented Apr 24, 2022 at 16:24

Sunlight · Accepted Answer · 2022-04-24 05:36:44Z

1

Where have you been applied the css? I can't see anything.

You have to add classes in elements like this. You may also can do this programmatically. But I don't know Vue. So please look into the docs.

<div v-if="profile.fname && profile.lname" class="important" >
    Profile: {{profile.fname}} {{profile.lname}}
</div>

answered Apr 24, 2022 at 5:36

Sunlight

1781 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Frida Over a year ago

I removed it since it didn't work for me, but I had it there before like this: <div class="profile_style" v-if="profile.fname && profile.lname" class="important" > Profile: {{profile.fname}} {{profile.lname}} </div>

Sunlight Over a year ago

If you want to use two classes in one element use it like class="profile_style important" this.

Sunlight Over a year ago

I highly recommend you to learn html and css first.

Collectives™ on Stack Overflow

Why my css styling does not work in Vue.js?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related