VueJS阅读Dom属性

我想获得href属性到按钮单击事件。VueJS阅读Dom属性

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

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'); 
    }, 
} 
});

目标事件不会选择一个元素。它选择被点击的元素。

来源

2016-09-06 Ramazan Apaydın

欲了解更多信息：https：//开头开发商。 mozilla.org/en-US/docs/Web/API/Event/currentTarget –

你想要event.currentTarget而不是event.target。这是一个小提琴的情况：https://jsfiddle.net/crswll/553jtefh/

来源

2016-09-06 20:48:11

不存在* Vue.js *这样做的方式？ –

不是。理想情况下，您永远不需要触摸DOM。该href应该在数据中的某处，以便您以更好的方式访问。这个问题可能是一个更有趣的东西的设置。 –

这是“Vue的方式”。 Vue关于可重用组件。因此，首先创建组件：

<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>

现在添加自定义属性和读取它的值：

<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>

来源

2017-07-16 12:41:12 WaldemarIce

VueJS阅读Dom属性

回答

相关问题