CODEWITHSUNDEEP
vue.js
Elijah
Elijah

Reputation: 1322

How to access and make reactive the :class and :style changes in Vue component

I have a Vue wrapper for Select2 component that I wrote a while ago. The wrapper is able to access the bind:class and bind:style attributes to pass along to the Select2 library, like so:

this.$vnode.data.staticClass // a string value of class="" attribut
this.$vnode.data.class       // an Object passed in via bind:class="{}" attribute
this.$vnode.data.style       // same as above but for style
this.$vnode.data.staticStyle

Now I would really like to be able to detect changes to these, so that I could pass them along to Select2 innards.

How can this be done?

Upvotes: 0

Views: 516

Answers (1)

IVO GELOV
IVO GELOV

Reputation: 14259

This is one variant for a functional wrapper around Select2:

<template functional>
  <component
    :is="injections.components.Select2"
    :ref="data.ref"
    class="any_desired_static_classes"
    :class="[
      data.class,
      data.staticClass,
    ]"
    :style="[
      data.style,
      data.staticStyle,
    ]"
    v-bind="data.attrs"
    v-on="listeners"
  >
    <slot />
  </component>
</template>

<script>
import Select2 from 'select2';

export default
{
  name: 'SelectWrapper',
  inject:
    {
      // workaround since functional components are stateless and can not register components in the normal way
      components:
        {
          default:
            {
              Select2
            }
        }
    }
};
</script>

Upvotes: 1

Related Questions