javascript - route - VueJS Leer atributos de Dom

vue title attribute

Question

Quiero obtener el atributo href para el evento de clic de botón.

<a v-on:click.prevent="func($event)" href="/user/all/2">
    <i class="fa fa-edit"></i>
    <span>Get Data</span>
</a>

Archivos Main.JS

new Vue({
el: ''body'',

methods: {
    func: function (event) {
        element = event.target;

        console.log(element); // Output : Select span|i|a element

        href = element.getAttribute(''href'');
    },
}
});

El evento objetivo no selecciona un elemento. Selecciona el elemento cliqueado.

Answer 1

Desea event.currentTarget , not event.target . Aquí hay un violín de la situación: https://jsfiddle.net/crswll/553jtefh/

Answer 2

Este es "Vue way". Vue se trata de componentes reutilizables. Entonces, crea el componente primero:

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <my-comp></my-comp>
</div>

<script>
  // register component
  Vue.component(''my-comp'', {
    template: ''<div>Just some text</div>''
  })

  // create instance
  new Vue({
    el: ''#app''
  })
</script>

Ahora agrega un atributo personalizado y lee su valor:

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <my-comp my-attr="Any value"></my-comp>
</div>

<script>
  Vue.component(''my-comp'', {
    template: ''<div>aaa</div>'',
    created: function () {
      console.log(this.$attrs[''my-attr'']) // And here is - in $attrs object
    }
  })

  new Vue({
    el: ''#app''
  })
</script>