Другой вопрос о 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, привели меня к-идиоматический подход в моем вопросе, а не то, как я решил бы t если бы я начал изучать разработку интерфейса с 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;
}
},
});