Answer the question
In order to leave comments, you need to log in
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:
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()
};
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;
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question