Как добавить уникальный слушатель события для каждого из элементов

Question

Я работаю над проектом Laravel. Я должен перебрать ресурс с помощью директивы @foreach blade следующим образом:

@foreach($users as $user)
    <p @click="toggleClick">{{ $user->name }}</p>
    <p v-if="clicked">Lorem ipsum</p>
@endforeach

Возможно, вы уже заметили проблему с этим подходом. Проблема в том, что если есть пять пользователей, слушатель toggleClick будет присоединен к каждому из абзацев. Поэтому, если я нажму на «одного» пользователя, скрытые абзацы Lorem ipsum будут немедленно показаны для «всех» абзацев. Вот пример:

Джон Доу

Lorem ipsum

Джейн Доу (щелкнула)

Lorem ipsum

Джимми Доу

Lorem ipsum

Но я хочу вот что:

Джон Доу

Джейн Доу (щелкнула)

Lorem ipsum

Джимми Доу

Как мне этого добиться?

Answer 1

Если вы не против использования некоторых классов и Javascript, я предлагаю вам такой подход:

var names = document.getElementsByClassName("toggleClick");

for (var i = 0; i < names.length; i++) {
  names[i].addEventListener("click", function(index, value) {
    this.nextElementSibling.classList.toggle("hiddenText");
  })
}

.hiddenText {
  display: none;
}

<p class="toggleClick">John Doe</p>
<p class="hiddenText">Lorem ipsum 1</p>
<p class="toggleClick">Jane Doe</p>
<p class="hiddenText">Lorem ipsum 2</p>
<p class="toggleClick">Jimmy Doe</p>
<p class="hiddenText">Lorem ipsum 3</p>

Надеюсь, это поможет.

Answer 2

Если вы хотите, чтобы каждый абзац вел себя независимо, у вас должны быть независимые слушатели.
Например, вы можете добавить индекс в ваш цикл и toggleClick(event, i), где i - номер абзаца.
В вашем HTML просто показывайте видимый абзац, используя логическое поле;)

Answer 3

Просто оберните это в некоторый div или smg как это.

@foreach($users as $user)
    <div>
        <p @click="toggleClick">{{ $user->name }}</p>
        <p v-if="clicked">Lorem ipsum</p>
    <div>
@endforeach

JS в jQ

q = f() ->
    $(this).parent().find('[v-if="clicked"]')
    // ...