Как обратиться к элементу массива?

Question

[Alex]

Добрый день, подскажите пожалуйста как найти и повесить клик к элементу массива с title 'DATE" ?

list: [
	{title: 'NAME', value: 'name'},
	{title: 'DATE', value: 'date'},
	{title: 'TIME', value: 'TIME'},
],

Answer 1

[Антон Антон]

<div v-for="(item, i) in list" :key="i" @click="item.onClick">{{item.value}}</div>

list: [
  {title: 'NAME', value: 'name'},
  {title: 'DATE', value: 'date', onClick() {alert('Ничего себе!')}},
  {title: 'TIME', value: 'TIME'},
],

Comments

[Alex]

Антон Антон, добрый день, спасибо большое, но у меня вопрос если у меня из массива list [], добавляется в пустой массив [] пример items[], как тогда повесить клик на date ?

[Антон Антон]

Alex, не понял, что куда добавляется

[Alex]

Антон Антон У меня есть 2 массива: 1) массив list [есть элементы] и второй массив пустой например items[], при клике на элемент {title: 'DATE', value: 'date'} из массива list[] у меня он выводится в виде списка он добавляется в пустой массив items[] с с помощью метода push(), после такого как я вывел значение через v-for и {{ }}, мне надо повесить клик на этот же элемент в пустом массиве {title: 'DATE', value: 'date'}, чтобы открылось окно popup. Вот я и не могу понять как его найти и обратиться. Пробивал все варианты и indexOf, includes, find все не находит все false или -1.

[Антон Антон]

https://sfc.vuejs.org/#eNqVUsFKw0AQ/ZVxL2kgTfAa0mJ...

[Alex]

Антон Антон, спасибо большое все работает, подскажите пожалуйста alert срабатывает все отлично, но когда меняю на открытие окна popup this.openCalendar = !this.openCalendar, т.е. {title: 'DATE', value: 'date', showCalendar() {this.openCalendar = !this.openCalendar}}, ничего не работает.

[Антон Антон]

Alex, без кода ничего не понятно. что будет если сделать console.log(this.openCalendar) в функции?

[Alex]

Антон Антон, undefined. Ещё вопрос при alert тестил, при нажатии на DATE да срабатывает клик все ок, если нажимаешь на другие item кидают ошибку item.item.onClick is not a function

[Антон Антон]

Alex, почему item.item? если undefined, то можно попробовать стрелочную функцию showCalendar: () => {}
вообще неплохо бы весь код куда-нибудь на codepen, а то эта телепатия малопродуктивна...

[Alex]

Антон Антон заработало !!!!! вы просто гений стрелочная функция сработала! Единственный нюанс почему на другие item сыпаться ошибки при клике item.showCalendar is not a function ?

[Антон Антон]

Alex,

ошибки при клике item.showCalendar is not a function

в vue3 не сыплются. в любом случае можно добавить пустых функций.

[Антон Антон]

Alex,

почему на другие item сыпаться ошибки при клике item.showCalendar is not a function

вероятно в шаблоне не @click="item.showCalendar", а @click="item.showCalendar()" и это объясняет и undefined и ошибки

[Alex]

Антон Антон да все правильно, спасибо ОГРОМНОЕ !!!

[Alex]

Антон Антон, прошу прощения, а если мне на другой item надо будет повесить @click, как тогда ? То есть например на каждом item свой click со своим popup окном

[Антон Антон]

Alex, я не зря назвал onClick. да, в каждом свою индивидуальную функцию, которая делает то, что нужно. но с одинаковым названием.

[Alex]

Антон Антон, час мучался спасибо, что отписались. Дай Бог тебе здоровья !