Vue events do not work in elements of type

Question

You can not listen to click events in <object> dom elements.

I expect to be able to listen to the events. Also if an element has an <object> element as a child (or descendant) the events do not work either, i.e. <a @click="whatever"><object...></object></a>

new Vue({
  el: "#app",
  data: {
  width: 200,
  },
  methods: {
   shot: function(todo){
     alert('hey')
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <object v-on:click="width+20" type="image/svg+xml" :width="width" data="https://dwglogo.com/wp-content/uploads/2017/09/Vue-logo-001.svg">
  <!--Fallback content would go here-->
  </object>
</div>

Actually I don't know how to solve this. I think this is default behaviour of ` — Odyssee, Jul 25 '18 at 20:16
[An object does not fire a click event](https://stackoverflow.com/questions/25916403/how-to-bind-click-event-to-object-tag), and it actually "swallows" the click event: since you are using an SVG, what about using an `` element? (unless, of course, that your example is very simplified) — Terry, Jul 25 '18 at 20:22
@Terry `` won't let change color of the stroke / fill of the svg that's why I used ` — Aquaguy, Jul 26 '18 at 08:53

score 1 · Answer 1 · answered Jul 26 '18 at 09:10

As I want to maintain css styling of the svg icons I did a nasty workaround by placing a div on top of the icon.

<template>
<span :class="['icon d-inline-block align-middle', cls]" :style="`width:${width}; height:${height};`">
    <div v-on:click.stop="$emit('click', $event)" class="icon-mask" :style="`width:${width}; height:${height}; margin-bottom:-${height};`"></div>
    <object  type="image/svg+xml" :data="path" :alt="name" :width="width" :height="height" :viewBox="box">
        <img :src="path" :alt="name" :width="w + 'px'" :height="h + 'px'" />
    </object>
</span>

Please, if someone know a better and more elegant way of working around this problem, let me know.

1 Answers1