Get css property of vue element?

Question

JavaScript

Good day, tell me how to get the css property of an element on vue js
for example

<div id="test"></div>
<style>
#test{
color:red
}
</style>

in js, they do it like this
var el = document.getElementById("test");
color=el.style.color;
how to do this on vue using its reactivity, that is, with a dynamic style change, what would the view pick up

Answer 1

The easiest option is inline-style
activeColor - from props or from data
That is, you don't need to get anything, you just need to set it.
The part of the CSS that will somehow change should be built based on the data initially. And then you get these CSS properties not directly from css, but from the data based on which the CSS properties are updated

Answer 2

The question is wrong. Reactivity lies in the fact that you do not "pick up" changes, but associate some kind of state (in this case, the value of the color css property) with the reactive Vue model (data, props, computed). And you work with the model, not with the styles. As you actually answered above.

Answer 3

https://ru.vuejs.org/v2/api/#ref
https://developer.mozilla.org/ru/docs/Web/API/Wind...
This is enough

Answer 4

You can get it this way, BUT in your case this approach is wrong

let element = document.getElementById("red-block") // #red-block { background: red }
let style = window.getComputedStyle(element)

console.log(style.getPropertyValue("background-color")) // rgb(255,0,0)