What is the best approach to dynamically bind a style property in Vue.js 3?

I am currently working with vue3 and I am trying to apply dynamic styles. This is how my vue3 template looks:

<ul>
  <li v-for="(question, q_index) in questions" :key="q_index" v-show="question.visible" :style="{padding-left: `question.level`rem}">
    <Question :title="question.title" :options="question.options" :name="question.id" :visible="question.visible" @opUpdate="opHandle"/>
  </li>  
</ul>

However, I encountered an error in my template related to '-':

Uncaught SyntaxError: Unexpected token '-'

Can someone guide me on setting up dynamic padding left CSS style in a vue3 template?

cssvue.jstemplatesvuejs3

Answer №1

To simplify this code, you can eliminate the hyphen and utilize a template literal:

<ul>
    <li
      v-for="(question, i) in questions"
      :key="i" v-show="question.visible"
      :style="{ paddingLeft: `${question.level}rem` }"
    >
        <Question
          @opUpdate="opHandle"
          :title="question.title"
          :options="question.options"
          :name="question.id"
          :visible="question.visible"
        />
    </li>
</ul>

Another tip: you have the option to utilize v-bind for passing object items to props with matching names.

<Question
  @opUpdate="opHandle"
  v-bind="question"  // handles `title`, `options`, and `visible`
  :name="question.id"
/>

Answer №2

Ensure to enclose the property within single quotes '' as shown below:

:style="{'padding-left': `question.level`rem}">

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

Value in Vue does not update when binded to input field

With the code below, the expectation is that when a minus sign is inputted, vue will replace the negative value with a positive one. <input type="number" :value="localValue" @input="$event => { onInput($event.target. ...

vue.js

Styling CSS for HTML links

I am encountering an issue with a CSS hover effect on an image that is also a hyperlink to another website. The CSS styling for the hover effect seems to be interfering with the functionality of the HTML hyperlink. The image in question is aligned with ot ...

htmlcss

challenges with template inheritance: when one template takes precedence over another

I have encountered an issue with my two HTML templates, login.html and signup.html. Both of these files inherit from the base.html file, but there seems to be a problem where one file is overriding the title and content of the other. So when I visit /login ...

javascripttypescripttemplatesgo-templates

Troubleshooting Laravel API Eloquent Where Clause inconsistencies when integrated with Vue

Question: Why is my where clause not working as expected? I am utilizing a Laravel API in conjunction with Vue (using Vuex) for my project. Here is the Controller function: public function specific_client(Request $request) { $id = $request ...

sqllaravelvue.jseloquentvuex

Is there a way to dynamically create a Vue component for every tier of a nested JSON object without prior knowledge of the total number of tiers available?

I am working with JSON data that includes a list of retailers, some of which have subretailers that go multiple levels deep. My goal is to use Vue to generate markup that will show the parent retailer along with any nested subretailers underneath it, simi ...

javascriptjsonvue.js

Changing the position of a Bootstrap popover dynamically from top to bottom

Struggling with the bootstrap popover here. I can't seem to change the popover position from top to bottom when it reaches the top of the viewport. I attempted to use placement: 'auto bottom' but unfortunately, it didn't do the trick f ...

javascriptjqueryhtmlcssbootstrap-popover

Transferring information using "this.$router.push" in Vue.js

I'm currently developing a restaurant review project using Django REST and Vue.js. To ensure uniqueness, I have adopted Google Place ID as the primary key for my restaurants. The project also incorporates Google Place Autocomplete functionality. The ...

javascriptvue.js

Custom publicPaths for Dynamic Page Rendering in Vue SSR

Our team is thrilled with the functionality of Vue and its server-side rendering module, Vue SSR. A key requirement for our project is the ability to dynamically adjust Webpack's publicPath at runtime in order to access assets from our different CDNs ...

vue.jswebpackvue-ssr

Using IE11 with Vue.js can cause issues with the checkbox input element. Specifically, the v-on:input event does not properly trigger the function specified

Why does this vue.js template not trigger in IE11? <input type="checkbox" v-on:input="blabla()"> In Firefox and Chrome, the blabla() function is executed, but not in IE11. Curious to know why? Check out this codepen for a demonstration. You'l ...

internet-explorervue.js

Java update query experiencing issues

This servlet is designed to add a new user entry into a database table. protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String firstname = request.getParameter("firstname"); Str ...

javajqueryhtmlcssjsp

I am having trouble viewing elements located below a div that I created using CSS

Currently, I am working on creating a portfolio page where the initial page opens with a height of '100vh' and width of '100%', which seems to be functioning correctly. However, I am facing an issue where I am unable to scroll down to v ...

htmlcssreactjs

Make changes to external CSS using HTML and JavaScript

Is it possible to dynamically change the value of a background in an external CSS file using JavaScript? Currently, all my pages are connected to a CSS file that controls the background for each page. I am attempting to modify the background by clicking a ...

javascripthtmlcssexternal

Create a navigation bar using CSS that is designed from an unordered list without any specific

Is it possible to create a multilevel menu using only CSS for the menu structure mentioned below? Websites like cssmenumaker.com showcase examples of menus with 2-3 level submenus by adding classes like has-submenu. Can we achieve this without adding any ...

jqueryhtmlcssmenu

What steps can be taken to prevent a wrapper's CSS from affecting its enclosed elements?

My container div includes some opacity and auto height that I don't want to affect all elements within it. Is there a way to preserve the container's styles without impacting its contents? ...

htmlcss

Utilizing Apollo and Vue.js to make GraphQL queries with multiple aliases

My Strapi backend is causing me some trouble as I attempt to fetch data from a single collection type into my Vue.js project using Apollo. Everything works smoothly with a single alias, but I'm facing difficulties when trying to work with multiple ali ...

vue.jsgraphqlaliasapollo

How to completely color a div in CSS

<h:head> <title>Unique Title</title> <style> .top{ margin: 0; padding: 0; background-color: blue; height: 15px; width: max-content; } </style ...

htmlcss

Unknown custom element error in Laravel and Vuetify

I encountered errors in my Laravel project, specifically with custom elements like this. [Vue warn]: Unknown custom element: <v-app> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found ...

javascriptlaravelvue.js

What could be the reason for the bottom edge of my central diagonal image having a darker border?

I can't figure out why the border on the bottom edge of my image is darker. You can check out the demo here. To get a closer look at the issue, you can open a software like GIMP and zoom in on the following image to see the difference in values: http ...

javascripthtmlcssreactjsimage

The post request functionality seems to be malfunctioning in Vue.js as per the console error message, which reads "POST http://localhost/3000/cars net

When attempting to use a post request in my Vue project, I am encountering an issue where the console displays the message: POST http://localhost/3000/cars net::ERR_CONNECTION_REFUSED. What steps can I take to resolve this problem? ...

vue.js

Switching from a layout of 3 columns to 2 columns on iPad when orientation is changed to portrait

Apologies for posting this inquiry here, but I am facing a challenge with an iPad issue when switching to portrait orientation on my website. I am using a @media query to detect the portrait view and I want to switch from three columns to two. However, th ...

cssipadorientation