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>