[Vuejs]-Accessing html elements with $refs returns different than document.getElementById()

by

2👍

Please could I encourage you to include your components and templates as it’s a lot harder to debug tiny snippets of code without their wider context.

That being said, it looks like you are trying to access Component A’s ref from Component B, which is not possible.

You are better off emitting the event in Component B and handling it in Component A:

Component A

<template>
  <div>
    <div ref="graph"></div>
    <!-- make this link invisible using position absolute, opacity: 0 etc -->
    <a ref="svglink" download="testSvg.svg" />
    <ComponentB @export="downloadSvg" />
  </div>
</template>

<script>
export default {
  methods: {
    downloadSvg() {
      var svg = this.$refs.graph;
      var serializer = new XMLSerializer();
      var source = serializer.serializeToString(svg);
      this.$refs.svglink.href = someLink;
      this.$refs.svglink.click();
      // ...
    }
  }
}  
</script>

Component B

<template>
  <a @click.prevent="$emit('export')">EXPORT SVG</a>
</template>

0👍

The problem was in fact a component hierarchy problem. Since the link was placed in a child component of the image.
I simply had to add $parent as :

ar svg =(this.$parent.$refs.graph); 
var serializer = new XMLSerializer();
var source = serializer.serializeToString(svg);

Leave a comment