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

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

My website has a search feature that displays a warning message when invalid data, such as special characters, is used in the search. Upon loading the page, the CSS initially loads like this: <div class="searchError" id="isearchError" style="display: ...

javascripthtmlcssautomationprotractor

The getElementByID function functions properly in Firefox but does encounter issues in Internet Explorer and Chrome

function switchVideo() { let selectedIndex = document.myvid1.vid_select.selectedIndex; let videoSelect = document.myvid1.vid_select.options[selectedIndex].value; document.getElementById("video").src = videoSelect; } <form name="myvid1"> <s ...

javascripthtml

How to efficiently create a unique object on MongoDB during the first instance

In the project I'm working on, there is a feature where a user can create a safe by visiting /mysafe. However, I want this safe to be created only once when they first visit the page. Subsequent visits should redirect them to /mysafe/theidofit. Have ...

javascriptmongodbexpressmongooseejs

Is there a way to retrieve the fully rendered HTML output of a component?

Trying to retrieve the innerHTML of a rendered component in Vue 3 is proving to be a challenge for me. I am familiar with using refs on regular HTML markup, but it doesn't seem to work as expected with components. <template> <div> &l ...

vue.jsvuejs3

Convert a string to HTML using AngularJs

Snippet: <tr ng-repeat="x in orderCsList"> <td class="ctn"><input type="checkbox" ng-model="x.checked"></td> <td class="ctn">{{ x.wdate }}</td> <td class="text-left">{{ x.wid }}</td> <td class="te ...

javascriptangularjs

The <NuxtLink /> element does not function the same as an anchor tag for creating internal links

I have a link defined in my Nuxt pages like this: <NuxtLink to="/#section-x">Section X</NuxtLink> The link is included in the menu on my global layout file. When I try to click the link from a page that is not the root page (/any-path), it ta ...

vue.jsnuxt.js

Transform collapsible color upon materialize click

Is there a way to change the color of the collapsible header only when clicked? I'm struggling with adding the color inside the class element while calling the "connect" function. Can this be achieved? <div class="collapsible-header" onclick="conn ...

javascripthtmlmaterialize

What is the best way to showcase a singular item from response.data?

Below is the controller I have set up to display details of a single book from my collection of json records .controller('BookDetailsController', ['$scope','$http','$stateParams',function($scope,$http,$stateParams){ ...

javascriptangularjs

Passport verification is successful during the login process, however, it encounters issues during registration

I am currently learning about passport.js and session management, and I'm in the process of implementing a local login feature on my website. Here is what I am attempting to achieve: Secret page: Authenticated users can access the secret page, while ...

javascriptnode.jsexpresspassport.jspassport-local-mongoose

Are Node environment variables persistent?

First Example: package.json Scripts "scripts": { "start": "node app.js", "test": "NODE_ENV=test mocha --reporter spec" }, Command to Run Test: if (process.env.NODE_ENV === "test") { cons ...

javascriptnode.jspackage

In Javascript, what significance does the symbol ":" hold?

While exploring the Ionic framework, I came across the following code snippet: import { AlertController } from 'ionic-angular'; export class MyPage { constructor(public alertCtrl: AlertController) { } I'm curious about the significanc ...

javascripttypescriptionic-framework

Encountering the error message "value is not defined" when using a React range slider

I recently tried setting up the nodejs react range slider component by following the instructions provided on https://www.npmjs.com/package/react-rangeslider. Despite installing all the necessary dependencies, I keep encountering an error message stating ...

javascripthtmlreactjsnpm

How to select the first column in a jQuery Datatable and turn it into checkboxes

I'm faced with a situation where I need to incorporate a checkbox column in a table, with the checkboxes appearing as Checked or Unchecked based on the values in the first column and its subsequent rows. The challenge lies in dealing with dynamic data ...

javascriptjquerycheckboxdatatables

Encountering an issue in React: Uncaught ReferenceError - require function not recognized

I am currently working on a project that utilizes both react and node (express). When I include react using src="https://unpkg.com/react@16/umd/react.development.js", everything works fine with JSX in the project. However, when I attempt to import like thi ...

javascriptnode.jsreactjsexpressjsx

Guide on how to verify if a component with a specific name is registered within the Composition API of Vue 3

My current situation involves a template that loads dynamic components based on their names: <template> <div> <div> <div> <component :is="getFormRenderer" &g ...

javascriptvue.jsvue-componentvuejs3

Connecting Formik with the react-phone-number-input library: A step-by-step guide

I am currently working on developing a form using Formik, Material UI, and the React-phone-number-input library for phone number formatting. I have encountered an issue where the formatted phone number is not being inserted into the Formik state, causing F ...

javascriptreactjsmaterial-uiformik

JSON containing attributes represented by Unicode characters

During the development of my web application, I am interested in utilizing JSON objects with Unicode attributes as shown below: a = { ονομα:"hello" } Subsequently, I would like to access it in this manner: a.ονομα Alternatively, exploring lo ...

javascriptjsonwebunicodeattributes

Implementing a Popover Notification When Clicked

I'm a beginner at this. I came across an example of a popover message box in the link provided below. I attempted to implement it, but for some reason, it's not working. Could I be overlooking something? Alternatively, is there a simpler way to ...

javascriptjqueryhtmlcsstwitter-bootstrap

Sending File from React to Express Causes 404 Error

My current project setup involves a React application housed in a client folder and an Express server located in the root directory. Within the React app, there are functionalities for selecting files and submitting them. I aim to transfer these files from ...

javascriptnode.jsreactjsexpresspost

The click event does not point to the servlet (IDEA, java)

I am facing an issue where the command $.get('MyController1', function (responseText) is not sending to my servlet. I am using ajax and after clicking the button it should send to my servlet ('MyController1' or 'MyController2' ...

javascriptjavajqueryhtmlservlets