alternative for jquery css in vuejs

Question

I'm learning vuejs and trying to do all without jquery

I need to get a value of a css style line-height. In jquery i would do:

let x = $(this).css("line-height");

How can I get this value using vuejs 2.5?

I was exploring this.$el in this structure, but can't find solution to get this value:

data: function () {
    return {
        lineHeight: null
    }
},
mounted(){
    this.lineHeight = ?
}

Answer 1

tl;dr

// with jQuery: $(this).css("line-height");
// with Vue:
mounted() {
    this.lineHeight = window.getComputedStyle(this.$el).getPropertyValue('line-height');
}

If the component (this.$el) may be inside an iframe or popup, or if you want to be extra careful, read on.

JSFiddle demo here.

new Vue({
  el: '#app',
  data: {
    lineHeightTLDR: '',
    lineHeightFull: '',
  },
  mounted(){
      this.lineHeightTLDR = window.getComputedStyle(this.$el).getPropertyValue('line-height');
      this.lineHeightFull = this.css('line-height');
  },
  methods: {
    css(propertyName) {
      let view = this.$el.ownerDocument.defaultView;
      if ( !view || !view.opener ) {
        view = window;
      }
      let computed = view.getComputedStyle(this.$el);
      return computed.getPropertyValue(propertyName) || computed[propertyName];
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <pre>lineHeight tl;dr..: {{ lineHeightTLDR }}</pre>
  <pre>lineHeight full...: {{ lineHeightFull }}</pre>
</div>

Background

Simplest way to mimic jQuery is just to take a look at its source. The returned value from .css() is, roughly:

ret = computed.getPropertyValue( name ) || computed[ name ];

Which uses CSSStyleDeclaration.getPropertyValue on computed. And computed is:

return function( elem ) {
    var view = elem.ownerDocument.defaultView;
    if ( !view || !view.opener ) {
        view = window;
    }
    return view.getComputedStyle( elem );
}

Which uses Window.getComputedStyle() As you can see, the returned value is something around:

ret = view.getComputedStyle(elem).getPropertyValue( name ) || view.getComputedStyle(elem)[name];

Where view is most probably window but could be something else (elem.ownerDocument.defaultView).

In the end of the day, if you want to be extra certain and do very close to jQuery.css(), use:

// with jQuery: $(this).css("line-height");
// with Vue:
mounted(){
    this.lineHeight = this.css('line-height');
},
methods: {
  css(propertyName) {
    let view = elem.ownerDocument.defaultView;
    if ( !view || !view.opener ) {
      view = window;
    }
    let computed = view.getComputedStyle(this.$el);
    ret = computed.getPropertyValue(propertyName) || computed[propertyName];
  }
}

But if you know your usage does not rely on iframes or popups (as it is very unusual for a Vue instance JavaScript code to run at a window and have the $el it is attached to on another), go with the tl;dr version.