C
C
Cyril2020-08-19 10:23:21
Vue.js
Cyril, 2020-08-19 10:23:21

Should I check the content of VUE $slots in computed?

Computed is cached, and checking for the presence of some components in certain $slots, as far as I understand, is resource-intensive.

Now I have a computed classList property for which it returns an object with a list of classes, and right in it I have a check for the presence of components passed to the slot:

Class object
return {
        button: true,
        "button--outline": this.color === "outline",
        "button--primary": this.color === "primary",
        "button--primary-glass": this.color === "primary-glass",
        "button--red": this.color === "red",
        "button--red-glass": this.color === "red-glass",
        "button--yellow": this.color === "yellow",
        "button--yellow-glass": this.color === "yellow-glass",
        "button--green": this.color === "green",
        "button--green-glass": this.color === "green-glass",
        "button--light": this.color === "light",
        "button--disabled": this.disabled,
        "button--full": this.full,
        "button--square": this.square || this.contentOnlyIcon(),
        "button--contains-link": this.link,
        "button--contains-icon": this.contentContainsIcon()
      };
Functions
contentContainsIcon() {
      let status = false;
      this.$slots.default.forEach(VNode => {
        if (
          typeof VNode.componentOptions !== "undefined" &&
          VNode.componentOptions.tag === "AppIcon"
        )
          status = true;
      });
      return status;
    },
    contentOnlyIcon() {
      const content = this.$slots.default;
      if (
        content.length === 1 &&
        typeof content[0].componentOptions !== "undefined" &&
        content[0].componentOptions.tag === "AppIcon"
      )
        return true;
      return false;
    }


Problem:
As you can see from the code, if the button contains only an icon, then a class is applied to it that makes it square, but if you reload the page, then the class is not applied, despite the fact that no data is changed anywhere.
I'm assuming it has something to do with caching the computed method?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question