Adding styles dynamically using methods is not supported in Vue.js

When it comes to adding styles to an HTML element from methods, I ran into a small hiccup. Here's what I tried:

<div class="add-profile-img" v-bind:style="getBackgroundImg()">

The method in question is:

getBackgroundImg: function() {
return {   
    width: 180px; 
    height: 180px; 
    background-color: 'yellow';
    background-image:url(this.BASE_URL +'/uploads/noimg.gif');
    }
},

Unfortunately, instead of success, I encountered this error message:

Syntax Error:   Identifier directly after number (79:13)

  77 |      getBackgroundImg: function() {
  78 |          return {   
> 79 |          width: 180px; 
     |                    ^

Any pointers on how I can fix this issue?

javascriptvue.js

Answer №1

To ensure the function returns a valid javascript object, dimensions in pixels must be in string format:

return {   
    width: '180px', 
    height: '180px',
    'background-color': 'yellow',
    'background-image': `url(${this.BASE_URL}/uploads/noimg.gif)`
}

Answer №2

May I inquire as to the reason behind your desire to achieve this? From my understanding, if you are binding a style, you simply need to create the object in the data property and ensure that you are using the correct syntax for JavaScript (CamelCase).

data() {
    return {
        yourStyleVariable: {
            backgroundColor: 'red'
        }
    }
}

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

SecretKey is not valid, FirebaseError code: 400

Currently, my backend is powered by Firebase. However, when I initiate it using NODE_ENV=debug firebase emulators:start --inspect-functions, the following messages are displayed: emulators: Starting emulators: auth, functions, storage ⚠ functions: Ru ...

javascriptnode.jsfirebase

The functionality of the Ajax form is limited to a single use

Here's how my script is currently looking. Yes, it comes from a plugin. No, I'm not very familiar with ajax. Is there a way for me to make this form refresh and be ready to accept input again after the first submission? <script> jQuery(do ...

phpjavascriptajaxwordpress

What Causes My Issue with $(document).ready()?

Currently delving into the world of jQuery, but I've hit a roadblock. Below is the snippet in question: var script = document.createElement('script'); script.src = 'https://code.jquery.com/jquery-3.4.1.min.js'; script.type = " ...

javascriptjquerydocument-ready

Transforming a file with a node module that lacks a .js class into a browseable format

I am currently working on browserifying my module. One of the dependencies I have is on this https://www.npmjs.com/package/chilkat_win32. It is present in my node_modules folder and here is how the structure looks: https://i.stack.imgur.com/uw9Pg.png Upo ...

javascriptnode.jsnpmbrowserifynpm-install

Utilizing the jQuery slideToggle method on the specified target element

I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...

javascripthtmljquerydrop-down-menudropdown

Invalid PDF File - Unable to Complete Download via $http

I'm facing an issue while attempting to download a PDF file using the $http service in AngularJS. Upon trying to open the downloaded file, I encounter an error message stating "Invalid Color Space" and the page appears blank. To troubleshoot this pr ...

javascriptangularjsajaxhttp

Need some assistance in finding a way to input multiple values from multiple buttons into a single input field in JavaScript

Hello, I am looking for a little help with reading multiple values using multiple buttons such as 1, 2, and 3, and displaying the output in the input like '123' instead of just one number at a time. Concatenate numbers with every click. <inpu ...

javascriptjqueryhtmlajax

Leverage the Google Drive API for the storage of app-specific data

I'm currently developing a JavaScript application that runs on the client side and need to store a JSON object containing configuration details in a Google Drive Appdata file. Through the Google Drive API, I can successfully check for the file within ...

javascriptjqueryhtmlgoogle-drive-api

Is there a method to dynamically incorporate a new editable textfield row in a react table?

Is there a way to dynamically add an editable row of text fields to a table in React? Currently, when I click on the "Add" button, a new row is added to the table but it's not editable by default. The logic for adding a new row is implemented inside t ...

javascriptreactjsmaterial-ui

Tips for preventing the parent element's height from fluctuating when displaying a child div using v-if

I have a main container and an inner container. The inner container is displayed using v-if. I want to include a transition effect on the inner element, but after the transition ends, the height of the parent container changes abruptly and looks unattracti ...

cssvue.jsvuejs2vue-componenttransition

How to direct every request to a single component in Vue.js

Hello everyone at Stack Overflow! I am a newcomer to this platform as well as Vue.js, so please bear with me if I make any mistakes in advance :) Currently, I am working on developing an application that consists of a single main component located in the ...

vue.jsvue-router

Leveraging traditional code methods within AngularJs

With a multitude of older javascript functions for sign up/sign in operations through parse.com, I am considering integrating AngularJS for improved routing and other advantages. Is it feasible to establish an angular stack and encapsulate these functions ...

javascriptangularjsparse-platformangularjs-directive

Implementing conditional navigation in app.vue based on the user's login status retrieved from the main.js file

I need to display a different navigation in app.vue based on whether the user is signed in or not. I have seen some complex solutions, but I'm wondering if there is a simple if/else solution or a way to pass a function from main.js to vue.js? Thank yo ...

vue.js

Guide to using Ajax to load a partial in Ruby on Rails

Whenever a search is triggered, I have a partial that needs to be loaded. This partial can take a significant amount of time to load, so I would prefer it to be loaded via Ajax after the page has fully loaded to avoid potential timeouts. Currently, my app ...

javascriptjqueryruby-on-railsajax

AngularJS - Showcase a dynamic list of information according to the value chosen

Seeking assistance from anyone willing. I have data in JSON format structured like this { state1: [ member1, member2], state2: [ member3,member4...], ... } There is a dropdown that displays the states listed in the JSON data. When a state is selected, I ...

javascriptangularjshtml-select

What is the best way to modify the CSS of a child element within the context of "$(this)"

On my search results page, each result has an icon to add it to a group. The groups are listed in a hidden UL element on the page with display:none. The issue I'm facing is that when I click on the icon for one result, the UL appears under every sing ...

javascriptjquerycssthischildren

Having trouble selecting a default option in a dynamically populated select dropdown using ng-model in the dropdown

For my Angularjs application, I needed to dynamically return a select drop down with its selected option. To accomplish this, I implemented the following function: function getCellRendererMapping(data) { if (data.order == 6) { return funct ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Is it possible to arrange two items in one column and the rest as columns in MaterialUI Grid?

I need help arranging my arrows in a MaterialUI grid where one points up and the other points down. How can I achieve this layout? Attached below is an image of my current setup and the desired outcome. Here is my code: <Paper className={classes.paper ...

javascriptreactjsmaterial-uigrid

"Enhance your website with the powerful autocompletion feature of

I am using Zend Framework to create a form element that utilizes Zend_Dojo_Form_Element_ComboBox. By setting dojox.data.QueryReadStore as the store type, I am able to generate a list of selectable values in my HTML input field. This allows me to either cho ...

phpjavascriptajaxzend-frameworkdojo

Avoiding the use of numbers in v-if in Vue.js

My website features a left menu that displays different content based on the selected menu's ID. However, I currently have === 0 and === 1 in the v-if statement, and I'm looking for a way to avoid manually inputting these numbers. <template& ...

javascriptvue.js