Steps for attaching distinct event listeners to individual elements:

Question

Steps for attaching distinct event listeners to individual elements:

I am currently developing a laravel project and I am faced with the task of iterating over a resource using the @foreach blade directive like this:

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

An issue has arisen with this method. The problem is that if there are five users, the toggleClick listener will be attached to every paragraph. Therefore, clicking on one user will cause all hidden Lorem Ipsum paragraphs to immediately display for all users. Here is an illustration:

John Doe

Lorem ipsum

Jane Doe (Clicked)

Lorem ipsum

Jimmy Doe

Lorem ipsum

What I desire instead is this:

John Doe

Jane Doe (Clicked)

Lorem ipsum

Jimmy Doe

How can I achieve this desired outcome?

javascript laravel vue.js

Answer 1

Answer №1

To ensure that each paragraph functions separately, it is necessary to have individual listeners.
One approach is to include an index in your loop and call toggleClick(event, i) where i represents the paragraph number.
In your HTML, display visible paragraphs based on a Boolean field.

Answer 2

To ensure that each paragraph functions separately, it is necessary to have individual listeners.
One approach is to include an index in your loop and call toggleClick(event, i) where i represents the paragraph number.
In your HTML, display visible paragraphs based on a Boolean field.

Answer 3

Answer №2

To make it more structured, enclose it in a div or something similar.

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

Use JavaScript in jQuery

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

Answer 4

To make it more structured, enclose it in a div or something similar.

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

Use JavaScript in jQuery

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

Answer 5

Answer №3

For those open to utilizing classes and Javascript, I propose the following method:

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>

I trust this solution proves useful.

Answer 6

For those open to utilizing classes and Javascript, I propose the following method:

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>

I trust this solution proves useful.

Steps for attaching distinct event listeners to individual elements:

Answer №1

Answer №2

Answer №3

Similar questions

Eliminate items from the array if the property of an object includes any of the provided substrings

Simply output the integer value

jqGrid is throwing an error: undefined is not recognized as a function

Creating interactive dropboxes in PHP and JavaScript to dynamically change options and display the selected value

Ways to ensure the text on my website scrolls into view as the user navig

Can you explain the distinction between firstChild and childNodes[1]?

Step by step guide on uploading files using Vue.js and Express.js

The callback response in Node's exec function is behaving incorrectly

Getting the parameter route value from Laravel and passing it to Ajax

Tips for displaying a tooltip when hovering over a label in a Material UI slider

Should an array be sorted before employing Array iterator methods, is it beneficial?

CORS blocked the JavaScript Image's request

Update: "Mui V5 - Eliminate collapse/expand icons in TreeView and reduce TreeItem indentation"

How can the "Unexpected token =" SyntaxError be resolved when running 'npm run dev' with Laravel-mix?

Utilizing Webpack's tree shaking functionality with the Vue template's v-if directive: a step-by-step guide

I'm perplexed by setting up Node.js in order to work with Angular.js

Leveraging Vue mixin within a @Component

Instructions for sending React form information to a database.json file using axios on a local server

Showing commute time using Google Maps API v3

Enhancing nouislider jQuery slider with tick marks