Vue.js ссылка div id на v-on: click

С помощью v-on:click Я хотел бы установить переменную с идентификатором div в Vue.JS - как мне это сделать?

<div id="foo" v-on:click="select">...</div>

<script>
    new Vue({
        el: '#app',
        data: {
        },
        methods: {
            select: function(){
                divID = this.id // ??
                alert(divID)
            }
        }
    })
</script>

Ответ 1

Вы можете расширить свой обработчик событий с помощью объекта события $event. Это должно соответствовать вашим потребностям:

<div id="foo" v-on:click="select($event)">...</div>

Событие передается в JavaScript:

export default {
    methods: {
        select: function(event) {
            targetId = event.currentTarget.id;
            console.log(targetId); // returns 'foo'
        }
    }
}

Как упомянуто в комментариях, $event не является строго необходимым, если использовать его в качестве единственного параметра. Приятное напоминание о том, что это свойство передается при явном его написании.

Однако никто не помешает вам написать короткую запись:

<div id="foo" @click="select">...</div>

Помните, что метод не получит объект $event при добавлении другого параметра. Вам необходимо явно добавить его в позицию, которую вы будете обрабатывать в слушателе. Любой порядок параметров будет работать:

<div id="foo" @click="select(bar, $event)">...</div>

Чтобы найти дополнительные параметры директивы v-on, вы можете просмотреть соответствующую запись в документации vue:

Документация Vue API - v-on

Ответ 2

Вдохновленный ответом @nirazul, для получения атрибутов данных:

HTML:

<ul>
    <li
            v-for="style in styles"
            :key="style.id"
            @click="doFilter"
            data-filter-section="data_1"
            :data-filter-size="style.size"
    >
        {{style.name}}
    </li>
</ul>

JS:

export default {
    methods: {
        doFilter(e) {
            let curTarget = e.currentTarget;
            let curTargetData = curTarget.dataset;
            if (curTargetData) {
                console.log("Section: " + curTargetData.filterSection);
                console.log("Size: " + curTargetData.filterSize);
            }
        }
    }
}

Ответ 3

Чтобы выделить другой вариант, кроме выбранного ответа на тот же вопрос, у меня есть кнопка удаления в записи, и я хочу выполнить действие с уникальным идентификатором записи (число). Я мог бы сделать выбранный ответ, как и раньше:

<button :id="record.id" @click="del">&times;</button>

Это оставляет прискорбную реальность того, что моей функции del необходимо извлечь атрибут id из события javascript, что больше касается API (DOM), чем моего домена (моего приложения). Также использование числа в качестве элемента id не является идеальным и может привести к конфликту, если я сделаю это более одного раза в представлении. Итак, здесь кое-что, что так же ясно и позволяет избежать путаницы в будущем:

<button @click="()=>del(record.id)">&times;</button>

methods: {
  del(id) {
    fetch('/api/item/${id}', {method:"DELETE"})
  }
}

Видите ли, теперь моя функция del берет идентификатор записи вместо события, упрощая вещи.

Обратите внимание, что если вы сделаете это неправильно, вы немедленно вызовете функцию удаления, а это не то, что вам нужно. Не делай этого: ~~

<button @click="del(record.id)">×</button>

Если в итоге вы это сделаете, Vue будет вызывать функцию del каждый раз, когда визуализируется этот HTML-фрагмент. Использование анонимной функции ()=>del(record.id) вернет функцию, которая готова к выполнению, когда произойдет событие щелчка.

На самом деле @nirazul доказал, что это хорошо. Не уверен, что моя проблема была.