Идиоматический способ передачи как события, так и локальной переменной vue в связанную функцию

Другой вопрос в StackOverflow (на который мне указал @Lawless) задавал тот же вопрос, с которого я начал (а именно, как получить доступ к данным события в привязке для перечисляемого элемента, а не связанного с объектом vue.js верхнего уровня ), предоставляя другой, более прямой (но даже более загадочный) подход к выполнению того же самого.

Напомним, начиная с элемента HTML, сгенерированного vue.js, привязанного к объекту vuejs, полученному с помощью перечисления.

<div class = "card pickup" v-for = "pickup in pickups">
        <select v-on:change = "locationChanged">
            ...
        </select>
</div>

Как получить доступ как к вспомогательному объекту (здесь pickup), так и к ссылке на элемент select, чтобы вы могли запросить его новое значение и действовать соответствующим образом.

Мой подход состоял в том, чтобы воспользоваться тем фактом, что vuejs передает событие по умолчанию, и обойти тот факт, что vuejs подавляет параметр события, если вы явно указываете локальный объект в качестве параметра в обратном вызове с помощью лямбда:

<div class = "card pickup" v-for = "pickup in pickups">
        <select v-on:change = "e => locationChanged(e, pickup)">
            ...
        </select>
</div>

Явное добавление интересующего меня элемента в обратный вызов за счет дополнительного вызова функции/уровня косвенности.

предыдущий ответ предоставил решение, в котором используется явно определенная переменная vuejs $event, которая всегда транслируется в собственное событие браузера, которое можно напрямую использовать в дополнение к любым другим переменным, которые вы хотите захватить, поэтому решение выглядит следующим образом:

<div class = "card pickup" v-for = "pickup in pickups">
        <select v-on:change = "locationChanged($event, pickup)">
            ...
        </select>
</div>

Что требует более глубокого знания vuejs, но позволяет избежать замыкания.

Тем не менее, я продолжал искать, потому что мне казалось, что это решение не соответствует духу vuejs (и все, что я когда-либо слышал, это то, что все бредили о том, насколько круты документы vuejs, но этот ответ не был явно там, а скорее должен был быть собраны воедино).

Кажется, я боролся с распространенным случаем, когда я знал, чего хочу, но не знал, как этого добиться ... и мои предыдущие знания в области, которые исключали vuejs, привели меня к неидиоматическому подходу в моем вопросе, а не к тому, как я было бы его решил если бы я начал изучать разработку интерфейса с vue.js в первую очередь.

В конце концов, я нашел очевидный ответ, который искал, ответ, который показался мне правильным «способом vuejs» и правильным идиоматическим решением моего первоначального вопроса:

Проблема в том, что я смешивал стандартную интроспекцию JS/DOM с моделью vuejs, и при переходе между ними возникали трения (дырявые абстракции и все такое). Мне нужен был собственный дескриптор элемента select вместе с объектом vuejs (pickup), когда мне следовало использовать исключительно vuejs для выполнения того, что мне нужно, в конечном итоге путем привязки элемента select к объекту/свойству vuejs и ссылке это прямо в моем связанном обратном вызове:

<div class = "card pickup" v-for = "pickup in pickups">
        <select v-model:pickup.location v-on:change = "locationChanged(pickup)">
            ...
        </select>
</div>

Теперь, когда элемент select привязан к свойству location моей модели vuejs, я могу напрямую запрашивать его состояние/значение в проходе обработчика locationChangedи в моем объекте pickup без необходимости использовать $event или замыкание:

let vuePickup = new Vue({
    el: '#pickups',
    data: {
        pickups: pickups,
    },
    methods: {
        locationChanged: (pickup) => {
            pickup.newLocation = pickup.location == -1;
        }
    },
});