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

An error occurs when attempting to access a property that does not exist on type 'never'. Why is this considered an error rather than a warning?

Leveraging the power of Framer Motion in combination with Typescript

Angular-Slickgrid: Some filters may not display on the header row

Setting the content-type for static assets in NuxtJS

What could be causing the issue with the navigation circles on my carousel not updating when clicked?

Handle and manage errors within the controller in Express.js to prevent the further execution of asynchronous functions

Requirements for Method Decorators - The complete path of the class module using the decorator must be provided

Challenges with managing VueJS methods and understanding the component lifecycle

Toggle the visibility of table row dynamically with the help of bootstrap-vue

Combining files/namespaces/modules in Typescript: How to do it?

AXIOS does not support PUT requests, unlike POSTMAN which handles them flawlessly

Setting up environment variables using Azure variables in a Vue project

Ways to merge two arrays into one in React JS

What is preventing type guarding in this particular instance for TypeScript?

Absolute imports in create-react-app do not function properly when using yarn v2 workspaces alongside typescript

The declaration file for the 'react' module could not be located

Object with Array of Unique Values in Vue.js

What is the best way to retrieve the updated value following a mutation in Vuex?

When using ngx-slider in Angular, it unexpectedly fires off when scrolling on mobile devices

Avoiding the use of numbers in v-if in Vue.js