Styling Vue JS Components with CSS Binding

I've been trying to apply CSS styling to vuejs tags without success. I'm struggling to get it to work with both regular styling and conditional binding. I've exhausted all the solutions on stackoverflow, but nothing seems to be working for me. Can someone please point out if I am making a mistake somewhere? Below is the code snippet I have been trying:

<b-table
    class="PatientTable"
    borderless
    hover
    v-on:row-clicked="redirectToPatientView"
    :items="users"
    :fields="fields"
    :current-page="currentPage"
    :per-page="perPage"
    id="tableData"
>
    <template v-for="key1 in fields" v-slot:[`cell(${key1})`]="{ value }" id="tableData">
    
        <b class="patientData" id="tableData" v-bind:key="key1" v-bind:style="'{font-size:200px;}'">{{ value }}</b>
    </template>
cssvue.jsvue-componentvuex

Answer №1

Make sure to pass in an object when binding a style, rather than a string of an object.

<!-- Instead of: -->
<b :style="'{font-size:200px;}'">{{ value }}</b>

<!-- Do: -->
<b :style="{ 'font-size' : '200px' }">{{ value }}</b>

In the second example, the object is inserted directly within the double-quotes without any additional single-quotes. The content inside the double-quotes represents JavaScript code, so there's no need to escape the object within them. Essentially, you are accomplishing something like this:

<b :style="styleBinding">{{ value }}</b>

<script>
export default {
  data: function() {
    return {
      styleBinding: {
        'font-size': '200px',
        'margin-top': '5em',
        'other-css-property': 'value'
      }
    }
  }
}
</script>

If you are dealing with only one property, it's neater to define it inline within the template.

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

Discover the way to create an HTML button with a mesmerizing transparent effect

For my website creation using Dreamweaver, I came up with the idea of utilizing Photoshop to design backgrounds. The reasoning behind this choice was that if I needed to modify button names at any point, I could simply edit the code and make the necessary ...

htmlcss

Transition/transform/translate3d in CSS3 may lead to significant flickering on the initial or final "frame" of the transition (specifically on an iPad)

Hello everyone, I am currently developing a web application specifically for the iPad and I have implemented a CSS3 transition to animate a div, moving it from left to right. Here is the structure of my class: .mover { -webkit-transition:all 0.4s ea ...

jqueryanimationcss

Tips for retrieving the state value and using it as a parameter in methods

Is there a way to utilize Vuex state and access it in the methods property of components? I have a state called "currentThreadId" that I would like to use within my methods. The issue I am facing is being able to retrieve the "currentThreadId" from the Vu ...

vue.jsvuex

Difficulty arranging these elements in CSS

I'm attempting to achieve the following: (The black box represents a signup/login section, the blue is a navigation bar, and the red is a header area with some text content) I'm trying to reach this outcome with the following CSS: @import url(/ ...

htmlcss

The offspring elements are positioned outside of the main footer element

There seems to be an issue with my <footer>. All child elements of the <footer> are appearing outside of it. Does anyone know how I can properly place child elements inside the <footer> and align them from left to right? footer{ bac ...

htmlcss

What is the best way to center text within an input field?

I've been attempting to center the text in the span tag within the input field, but using "text-align": center in my css doesn't seem to be working as expected. Interestingly, when I switched the span tag to a paragraph tag, it caused the input ...

htmlcssangular

choose the option that is always preselected and kept invisible

I am looking for a specific behavior in my code: The option for previous years should not be available initially However, when a year is selected from the dropdown menu: I want the "Previous years" option to reappear and display the selected {{year}} ...

vue.js

Issue with displaying Buefy Material Design icons when using the b-icon component

This is my first time using Buefy I encountered an issue with the b-icon component, Rather than displaying the icon, I saw an empty block element which was confusing. Switching to a different icon pack did not resolve the problem either. ...

vue.jsmaterial-designbuefymaterial-design-icons

When the last character in the route is a forward slash, the Express server will load the HTML page with CSS and JavaScript. Conversely, if the last route character

On my second html page model.html, I noticed the following issue: When I include a '/' at the end of my route address in the browser like this: http://localhost:3002/home/model/, the correct html page is loaded, but the css/js files do not load. ...

htmlcssnode.jsexpress

Loop through an array in JavaScript to create properties for an object

When working with Vue, I encountered a prop that is actually an array containing multiple types of items. For each item in this array, I want to create a property in a specific object. For example, if the array includes methods and count, I aim to construc ...

javascriptvue.js

Extract data from Vue.js using Axios for submitting a form in Symfony

Hey there, I'm currently working on accessing the vue.js data array from a Symfony back-end using axios. Below is my code snippet. var vm = new Vue({ el: '#el', delimiters: ["[[", "]]"], data: ...

vue.jsaxiossymfony4

Ways to keep the position of an expanded collapsible table from Material UI intact

I found a collapsible table code snippet on this website: https://mui.com/material-ui/react-table/#collapsible-table However, there seems to be an issue where when I expand a row, the table "grows up" as it increases in size. This behavior is not ideal. I ...

javascripthtmlcssreactjsmaterial-ui

Trouble retrieving data using component props

I am currently facing an issue with displaying data from the API in a component. The request is being made from the parent page, but the loop to display the data is within the child component. Unfortunately, the data is not showing up on the parent page as ...

javascriptvue.jsaxiosvuejs3

I'm confused as to why my external CSS file isn't cooperating with Bootstrap 4

I am facing an issue with loading an external CSS file into my index.php. I have placed the external CSS file at the end of all other CSS files like bootstrap and font awesome. However, when I try to make changes to the design using the code in the externa ...

htmlcssbootstrap-4

Issues arise when implementing ReactJS transitions for progress bars

As a newcomer to the world of ReactJS, I have been exploring the FB documentations and online tutorials to kickstart my test project. Within this project, I wanted to implement a progress bar that visually represents the user's progression through fi ...

cssreactjs

What are the steps to transform an object into an array with the use of either php or javascript?

I am currently utilizing Full Calendar to generate events. Below is the backend code from my controller, which is written in Laravel. public function index() { $myInterviews = Interview::all()->where('candidate_user_id', Auth::user() ...

laravelvue.jsfullcalendar

What could be causing the .hover function to malfunction and how can I make it so that the .hover function only applies within the corner radius area?

I am attempting to make circles react to my jquery .hover function. Below is the JavaScript code I am using: jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + ...

javascriptjquerycssjquery-hover

Utilize a tool such as barcodescanner within the Nativescript Vue framework

Trying to incorporate the barcodescanner plugin here in nativescript-vue, I first installed it using npm within my project : npm install nativescript-barcodescanner Next, I registered it in my src/main.js file : Vue.registerElement('BarcodeScanner& ...

vue.jsnativescriptbarcode-scannernativescript-vue

Tips for updating content on hover

I have been experimenting with this idea and initially thought it would be a simple task. My goal is to hover over the 'NEW' label and change its content to 'ADD' using only CSS. body{ font-family: Arial, Helvetica, sans-serif; } ...

htmlcss

Troubleshooting problems with anchor-targets in Skrollr

I am experimenting with having divs overlap each other as the page is scrolled using Skrollr. Initially, I was able to achieve the desired effect with two divs. However, when trying to incorporate a third div, only the first and last ones seem to work prop ...

javascriptjqueryhtmlcssparallax