web-dev-qa-db-ja.com

VueJS読み取りDom属性

ボタンクリックイベントのhref属性を取得したいのですが。

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

ターゲットイベントは要素を選択しません。クリックした要素を選択します。

javascriptvue.jsvue-resourcevue-component
6
Ramazan APAYDIN

あなたが欲しいevent.currentTarget、ではないevent.target。ここに状況のフィドルがあります： https://jsfiddle.net/crswll/553jtefh/

15
Bill Criswell

これは「Vue way」です。 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>
5
user6748331
var app = {
        func: function (event) {
            console.log(event.currentTarget.id);//this will get whole html tag
            console.log(event.currentTarget.href);//this will show href value
        }
    }
    // Apps  
    var app_vue = new Vue({
        data: app,
    }).$mount("#app_vue");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app_vue" v-cloak  class="card" >
    <a v-on:click.prevent="func" href="/user/all/2">
        <i class="fa fa-edit"></i>
        <span>Get Data</span>
    </a>
</div>
0
Saidul Haque