Menu
Can't add style in $refs attribute. Cannot set property 'cssText' of undefined. Is this possible? Can't find any similar to this
this.$refs['ticketCode_'+this.resoTrans_id].style.cssText =
"background-color:#66BB6A !important; border:1px solid #66BB6A !important; color:#fff !important;";
Printing out without .style seems work fine console.log(this.$refs['ticketCode_'+this.resoTrans_id])
VueComponent {_uid: 493, _isVue: true, $options:
405
Working with refs in React. Refs make it possible to access DOM nodes directly within React. This comes in handy in situations where, just as one example, you want to change the child of a component. Let’s say you want to change the value of an <input> element, but without using props or re-rendering the whole component.
The ref is created using a callback like we did in the first example of this section. The key lies in how we access the DOM of the input element in the Input component from the App component. If you look closely, we access it using this.inputElement.
* Where you insert the STYLEREF field determines the direction that Microsoft Word searches in for the style and thus can affect which text is inserted. * When you insert the field in: Document text Microsoft Word searches for the closest text preceding the STYLEREF field. If the style isn't found, Word searches for the closest following text.
When the ref attribute is used on a custom class component, the ref object receives the mounted instance of the component as its current. You may not use the ref attribute on function components because they don’t have instances. The examples below demonstrate the differences. Adding a Ref to a DOM Element
You're not supposed to use cssText but instead use the JavaScript API to set styles (which you can do on $refs, too):
let $ref = this.$refs['ticketCode_' + this.resoTrans_id]
$ref.style.backgroundColor = '#66bb6a';
$ref.style.border = '1px solid #66bb6a';
...
Even better is to utilize Vue's power for that directly in your template:
<your-element ref="'ticketCode_' + resoTrans_id" :style="{ backgroundColor: '#66bb6a', border: '1px solid #66bb6a' /* ... */ }" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
