What is the best way to insert CSS code into a custom Vue directive file?

Question

What is the best way to insert CSS code into a custom Vue directive file?

I need a solution that applies a gradient background to the parent div in case an image fails to load. I've attempted to create a directive for this purpose:

export default {
    bind(el: any, binding: any) {
        try {
            .....
            img.onerror = () => {
                el.parentNode.classList.add("fallback");
            };
        } catch (e) {

        }
    },
};

The directive works with the following template:

<div><img v-image-fallback :src="xxx" /></div>

And it also includes these styles:

.fallback {
    width: 600px;
    height: 400px;
    margin: auto;
    background: radial-gradient(...);
}

Is there a way to effectively combine the directive and CSS components together? Can the two work seamlessly?

typescript vue.js

Answer 1

Answer №1

The existence of the parent node cannot be guaranteed until the inserted hook in Vue 2 or the mounted hook in Vue 3 is reached.

To ensure access to the parent node, switch from using the bind hook to either of the following:

// MyDirective.js
export default {
  // BEFORE:
  bind(el) {
    console.log(el.parentNode) // => null ❌ 
  }

  // AFTER (Vue 2):
  inserted(el) {
    console.log(el.parentNode) // => <div> ✅
  }

  // AFTER (Vue 3):
  mounted(el) {
    console.log(el.parentNode) // => <div> ✅
  }
}

See live demo

Answer 2

The existence of the parent node cannot be guaranteed until the inserted hook in Vue 2 or the mounted hook in Vue 3 is reached.

To ensure access to the parent node, switch from using the bind hook to either of the following:

// MyDirective.js
export default {
  // BEFORE:
  bind(el) {
    console.log(el.parentNode) // => null ❌ 
  }

  // AFTER (Vue 2):
  inserted(el) {
    console.log(el.parentNode) // => <div> ✅
  }

  // AFTER (Vue 3):
  mounted(el) {
    console.log(el.parentNode) // => <div> ✅
  }
}

See live demo

What is the best way to insert CSS code into a custom Vue directive file?

Answer №1

Similar questions

Making changes to an input field can impact other elements when using the v-model directive

When first accessing the page, the map may not load properly. However, a simple refresh of the page in VueJS should resolve this issue and allow the

Converting Typescript library into a standalone global JavaScript file

Endpoint path for reverse matching in Mongodb API

The background image on Nuxt.js is not adapting to different screen sizes

Error in Module Building: The path argument must be a string type. A different type was received, which caused the build to fail

Should front-end and back-end share Typescript data modeling through classes or interfaces?

Which is the better choice for simply invoking a service method - subscribe or toPromise?

The tsconfig.json file is located separate from the project directory

Utilizing import for Ionic3 to export const with logic

Can Typescript restrict a value to only exist within a specified set of key names within the same object?

Finding the specific type within a union based on its field type

Twilio SMS Notification: The Class extension value provided is not a valid constructor or null

Utilize vue-resource for updating information in the database

The process of subscribing to a service in Angular

Encountering a TypeError stating that the "option is undefined" error has occurred

The Vue CLI is failing to pick up SocketIO events

Issues in the d3.js chart

Separate the generic function interface into its own type/interface variable

What is the best way to trigger an API call every 10 seconds in Angular 11 based on the status response?