How to set non-reactive component instance level data in Vue 3?

Question

There is a similar question for Vue2 and recommendation is to use $options.

But it seems that it does't work for Vue 3.

First of all, Vue 3 documentation say, that $options is read only.

So when I am trying to initialize tooltip in instance when component mounted, I get very strange behavior, when tooltips are shown from last created component, so it seem that $options are somehow "global" ?

When put tooptip to data everything works fine, but obviously tooltip should not be reactive and I'd like to put it outside the data.

<template>
  <i
      :class="['bi ', icon, hover && 'text-primary']"
      class="bg-body"
      @mouseover="hover = true; $options.tooltip.show();"
      @mouseleave="hover = false; $options.tooltip.hide();"
      @click="$options.tooltip.hide();"
      style="cursor: pointer"
      :title="title"
      ref="icon"
  />
</template>

<script>
import {Tooltip} from "bootstrap";

export default {
  props: ["icon", "title"],
  tooltip: null,
  data() {
    return {
      hover: false
    }

  },
  mounted() {
    this.$options.tooltip = new Tooltip(this.$refs.icon,{
      placement: 'bottom',
      trigger: 'manual',
      title: this.title || ''
    });
  },

}
</script>

tony19 · Accepted Answer · 2021-10-11 23:59:30Z

3

You can attach non-reactive properties directly to the component instance in the mounted() hook:

<script>
export default {
  // tooltip: null,
  mounted() {
    // this.$options.tooltip = new Tooltip(...)
    this.tooltip = new Tooltip(...)
  },
}
</script>

<template>
  <!-- BEFORE -->
  <i
      @mouseover="hover = true; $options.tooltip.show();"
      @mouseleave="hover = false; $options.tooltip.hide();"
      @click="$options.tooltip.hide();"
      ref="icon"
  />

  <!-- AFTER -->
  <i
      @mouseover="hover = true; tooltip.show();"
      @mouseleave="hover = false; tooltip.hide();"
      @click="tooltip.hide();"
      ref="icon"
  />
</template>

demo

edited Oct 11, 2021 at 23:59

answered Oct 11, 2021 at 23:37

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anton Ovsyannikov Over a year ago

Seems it works, but the property still can be used in template i.g. Can it lead to any performance drawbacks?

Collectives™ on Stack Overflow

How to set non-reactive component instance level data in Vue 3?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related