What is the reason my CSS formatting isn't being applied in Vue.js?

As a newcomer to web development and vue.js, I've been struggling to style my code effectively. Below is an example of my vue.js code where I have created markup for a profile description using figure, figcaption, and image elements. Could you please guide me on how to apply CSS styles to this code?

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

Answer №1

Where have you implemented the CSS? I seem to be missing something.

In order to style elements, you need to add classes like shown below. Alternatively, you can also do this programmatically. However, my knowledge of Vue is limited. I recommend checking the documentation for guidance.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Personalizing the dimensions of audio.js

I recently integrated the audio.js plugin into my website. I've added the necessary code to the header.php file located in the includes folder. <script src="audio/audiojs/audio.min.js"></script> While the player appears correctly on othe ...

Refreshing events in FullCalendar 5 using Vue.js's refetchEvents

I am currently integrating FullCalendar with Vue.js. My goal is to reload the events when the refreshCal() function is triggered, thereby rendering the calendar on the screen using refetchEvents. I have two main components: The Calendar: here is the code ...

Steps for embedding the code into your website

I'm facing an issue with integrating a .jsx file into my website. I tried testing it on a single-page demo site, but nothing is showing up. Can someone guide me through the steps to successfully integrate it onto my site? I've also attached the . ...

Field for user input featuring a button to remove the entry

I am attempting to add a close icon to a bootstrap 3 input field, positioned on the top right of the input. Here is what I have tried so far: https://jsfiddle.net/8konLjur/ However, there are two issues with this approach: The placement of the × ...

The v-autocomplete feature in vuetify doesn't allow for editing the text input after an option has been selected

Link to code on CodePen: CodePen Link When you visit the provided page and enter "joe" into the search box, choose one of the two Joes that appear. Try to then select text in the search box or use backspace to delete only the last character. You will no ...

Using the `setTimeout` function to swap components

As I work on implementing a setTimeout method, the goal is to trigger an event after a .5 second delay when one of the three buttons (drip, french press, Aeropress) is pressed. This event will replace {{ShowText}} with {{ShowText2}}, which will display &ap ...

Creating customized meta tags with Vue Meta 3: A step-by-step guide

Just wanted to share my experience: "I decided to switch from vue-meta to @vueuse/head package found at npmjs.com/package/@vueuse/head and it works perfectly." I've implemented Vue Meta 3 for providing meta data to my website. The API documentation c ...

What is the best way to integrate vue-i18n into my Vue router?

Here is a snippet from my main app.js: import Vue from 'vue' import language from './language' import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ locale: 'en', messages: language.messag ...

Is it possible to implement a unique style exclusively for my application's components?

Recently, I've been trying to apply a universal style rule to my entire app similar to this: div { width: 100%; } At first, everything seemed to be working perfectly. However, when I began integrating third-party components that have their ow ...

Combining namespaced mapGetters with global getters: A step-by-step guide

I have utilized a namespace for one of my Vuex modules and I am uncertain about the syntax that should be employed in this situation. Currently, I am using the following syntax with `dealfilters` as my namespaced module: ...mapGetters('dealfilters&a ...

Bootstrap 4: In collapsed navbar, li items are shown horizontally beside navbar-brand

I've been troubleshooting this issue for hours. It seems like the navbar is not collapsing correctly in Bootstrap 4, causing the next list item to display to the right of the navbar-brand text instead of below it like the other items. <nav class=" ...

How can I align the tags properly when inserting a tab box within a section tag?

How can I successfully insert a tab box within my section tag? I found this tab box tutorial on the website here The download link for the source code is available here: source code Below is the HTML code snippet: <!DOCTYPE html> <html> & ...

Adjust the left margin to be flexible while keeping the right margin fixed at 0 to resolve the spacing

To create a responsive design that adjusts based on screen size, I initially set the content width to 500px with a margin of 0 auto. This meant that for a 700px screen, the content would remain at 500px with left and right margins of 100px each. Similarl ...

Adjust the location of the scrollbar without affecting the alignment of the text

Currently, I'm experiencing a design issue with the textarea tag in my React project. The layout looks like this: https://i.stack.imgur.com/JG1sm.png I am looking to shift the scrollbar to the right without altering the text direction (rtl). Utilizin ...

Merging the Select and Input elements side by side using Bootstrap grid system

Is there a way to combine all form group items like Select and Input using only the bootstrap framework? I attempted the method below, but there is an extra space between the Select and Input Box. Check out the DEMO ...

Does anyone know how to begin implementing Opentelemetry browser instrumentation for a vue.js application?

import { WebTracerProvider, BatchSpanProcessor, ConsoleSpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-web'; import { ZoneContextManager } from '@opentelemetry/context-zone'; import { Resource } from '@opentelem ...

Pressing a button is a way to select a specific form

I'd like to create a clickable button that can direct users to the form section on the same page. <button type="button" class="btn btn-primary btn-sm"> Go to Form Section </button> ... <form id="form1"> <div class="form-g ...

Adding a Font Awesome icon on the fly in Vue.js

In my Vue modal, I have two inputs along with a button that adds two more inputs dynamically when clicked. Everything is functional, but I want to include a font awesome icon next to the dynamically created inputs. How can I achieve this in Vue? Here' ...

What methods are there to verify computed properties in VueJS?

I'm currently working with VueJS through Vue CLI, which means all my components are in the .vue format. Within one of my components, I have an array named fields located in the data section. //Component.vue data() { return { fields : [{"name" ...

Notify the chat when a new record is added to the database

Alright, so here's the issue I'm facing. I created a chat application using PHP and MySQL, but I noticed that when I enter text, it doesn't update in the other window automatically. This led me to experiment with iframes, which I found much ...