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

回答

相關問題