Enhancing appearance with $refs?

Having trouble adding style to the $refs attribute. I keep getting an error message saying "Cannot set property 'cssText' of undefined." Is there a way to accomplish this task? I haven't come across anything similar to this issue before.

this.$refs['ticketCode_'+this.resoTrans_id].style.cssText =
                "background-color:#66BB6A !important; border:1px solid #66BB6A !important; color:#fff !important;";

Interestingly, when printing out without using .style, everything seems to work fine: 

console.log(this.$refs['ticketCode_'+this.resoTrans_id])

VueComponent {_uid: 493, _isVue: true, $options:
javascriptvue.js

Answer №1

A recommended approach is to avoid using cssText and instead utilize the JavaScript API for setting styles (which can also be done on $refs):

let $ref = this.$refs['ticketCode_' + this.resoTrans_id]

$ref.style.backgroundColor = '#66bb6a';
$ref.style.border = '1px solid #66bb6a';
...

An even more efficient way is to leverage Vue's capabilities directly in your template:

<your-element ref="'ticketCode_' + resoTrans_id" :style="{ backgroundColor: '#66bb6a', border: '1px solid #66bb6a' /* ... */ }" />

Answer №2

In order to adjust the styling of the $ref's element property, you will need to directly target the $el property. It is important to note that your $ref represents a Vue Component (as indicated by the console output of your $ref), and not just an HTML element:

this.$refs['ref-name'].$el.style.top = `${topVal}px`

Answer №3

use the object key in $refs to apply styling directly

this.$refs['ticketCode_' + this.resoTrans_id].style.background="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

Stop any accidental double clicks on the <input type="submit" /> to avoid duplicate entries

Is it possible to prevent a user from clicking twice on an input tag button with type submit? I attempted using ondblclick="javascript:void(0)", but it did not work. My code is within an Html.BeginForm, not a form element tag. Thank you in advance for al ...

javascriptc#jqueryhtmlasp.net-mvc

Does Typescript fail to recognize the "delete" operator?

Whenever I utilize the delete operator in Typescript, it appears that the system does not recognize that the property has been eliminated. For instance: interface HasName { name: string; } interface HasNoName { name: never; } function removeName( ...

javascripttypescript

How can we effectively implement conditional rendering when dealing with components that are nearly identical?

Depending on whether the user is a professor, student, or not logged in, I render different landing pages. The landing pages are quite similar, with the only distinction being the buttons displayed. While I could easily achieve this using inline conditions ...

javascriptreactjsjsxhigher-order-componentsconditional-rendering

Pattern Matching: Identifying partial or complete text

Currently, I'm facing challenges with a small script that is designed to compare the value from a text input with items in an array either partially or completely. I am struggling specifically with the regular expression and its syntax. I was hoping ...

javascriptregexmatch

Issue with smart table sorting functionality

I've been working on a table with just one column that is populated from a string array. However, I'm struggling to get the sorting functionality to work properly. Can anyone pinpoint what mistake I might be making here? Steps taken so far: 1) ...

javascriptasp.netangularjsrestsmart-table

Configuring a Meteor.js application requires defining variable scopes for templates in order to manage

Is there a way to define a variable that is limited in scope to a specific template? I want this variable to be accessible by multiple helpers within the template, but not outside of it. For example, how can the game variable be shared between two templat ...

javascriptnode.jsmeteor

What is the most efficient way to transfer a large volume of documents from mongoDB using http?

I'm dealing with a large mongoDB database that contains millions of documents and I need to fetch them all at once without crashing or encountering cursor errors. My goal is to send this data over http using express in nodeJS. The collection contains ...

javascriptmongodbexpress

preserve functionality when switching between pages

I have created two simple functions that can change the background color of the body. <script type="text/javascript"> function switchBackground(color){ document.body.bgColor=color; } </script> I am using links with onclick to execute thes ...

phpjavascripthtml

You can obtain the values of multiple div selections using jQuery

In a display with two columns, I want to be able to perform a common operation (such as delete) based on the selection of certain div IDs. If a user selects the div IDs participant_1, participant_4, participant_6 at the same time, I need to collect these ...

javascriptjquery

NodeJS's pending ajax post using SailsJS

I'm experiencing an issue with processing AJAX data in my sailsJS app. The ajax post data always stays in the pending state, here is the code from my view: <script type="text/javascript"> $('#submit').click(function(){ $.ajax ...

javascriptajaxnode.jssails.js

Troubleshooting Angular JS Module Injection Issues

Lately, I've been exploring the wonders of angular JS and it has truly impressed me. However, one concept that still eludes my full understanding is injection. Despite this, I have successfully employed this technique across numerous pages in my proje ...

javascriptangularjs

Angular JavaScript does not take effect on elements inserted into ui-view

When transferring the code from main.html to index.html, the javascript functions smoothly. The click function successfully triggers the ripple effect. Link: Ripple Click Effect Google Material Design However, upon extracting the code to main.html and in ...

javascriptjqueryangularjsuiview

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Require checkboxes instead of a selection option and have multiple checkbox options. Depending on the checked checkboxes, different form fields should appear. A submit button is needed. I have included some CSS code, but a more detailed CSS code is requir ...

javascripthtmlcssforms

Error message in my Angular project: Invalid Target Error

Out of nowhere, I encountered an invalid target error while running my Angular project with the command: npm start An unhandled exception occurred: Invalid target: {"project":"agmbs","target":"build","configur ...

javascriptangularnpm

Even though setState is supposed to update the state and trigger a render, it's not showing up in the view for some

My React app consists of a simple word/definition feature. There is an edit box that appears for users to change the definition when they click on "edit". Even though I call getGlossary() to update the new definition in the state, I can see the changes in ...

javascriptreactjsstatesetstate

Tips for preserving the contents of a list with HTML and Javascript

My latest project involves creating a website with a To-Do list feature. Users should be able to add and delete items from the list, which I achieved using JavaScript. Now, my next goal is to ensure that the current items on the list are saved when the pag ...

javascripthtmlcss

Ways to identify when the user has stored a file on their local disk using Angular/NodeJS

In my NodeJS backend, I am generating a JSON file temporarily to store the information provided by the user in a form. Upon clicking the download button at the end of the form, I execute a Python script within NodeJS to verify the data and create a tempora ...

javascriptangularjsjsonnode.jshttp

What is the best way to align the 'Typography' component in the center?

Attempting to center it using flexbox with justify-content did not yield the desired result. I also tried replacing the Typography component with a div tag, but still no success. import {AppBar,Zoom,Toolbar,Typography,CssBaseline,useScrollTrigger,Fab,ma ...

javascriptcssreactjsflexboxmaterial-ui

Setting properties on functions and defining their prototype

My task involves working on the following block of code: function Vector(x, y) { this.x = x || 0; this.y = y || 0; } Vector.add = function(a, b) { return new Vector(a.x + b.x, a.y + b.y); }; Vector.sub = function(a, b) { return new Vecto ...

javascriptprototype

Duplicate the image from a specific div to another div, ensuring that only one clone is created

I'm trying to replicate an image in multiple spots within a frame, but I can only manage to get one instead of many. Can someone please tell me what I'm doing wrong? I am creating a map of terrain where I need to clone images from one div to anot ...

javascriptjqueryhtml