search

shrpne / vue-inline-svg

Dynamically loads an SVG source and inline <svg> element so you can manipulate the style of it
MIT License
177 stars 22 forks source link

@loaded is firing too early #13

Closed bosbode closed 4 years ago

bosbode commented 4 years ago

Hi, I'm trying to animate my svg with the id specified in the svg. But I have the problem that when I try to create a selector for it, it can't find the id.

So I created a method svgLoaded to console.log(this.$el.querySelector('#id')), to fire on @loaded, I get "null" back. Which gives me the idea that @loaded fires when not everything is loaded.

When I console.log the parent of the svg, it does show the parent but not the svg itself.

Is there a way around this?

edit: The only way I get it to work if I set a setTimeout in mounted that runs the method. But there must be a better way.

shrpne commented 4 years ago

Thank you for reaching out!

Indeed there was a bug @loaded firing when SVG loaded but not inlined, I have added a workaround to wait for component to rerender.

You can check 1.3.0 it should work as expected.

Also now I pass inlined SVG to the @loaded callback as an argument so you can try to use it instead of querying by id.

<inline-svg @loaded="svgLoaded"/>
{
  methods: {
    svgLoaded(svgEl) {
      console.log(svgEl)
    }
  }
}
bosbode commented 4 years ago

First of all, sorry for the late reaction. I wanted to test everything before replying and then came across some other thing that wasn't working in my own code. So I got a bit distracted.

Second of all, thank you for the quick fix. Everything works as expected and I can continue my project as planned.