"Deleting an element from an array with a click of a button

Question

"Deleting an element from an array with a click of a button

Whenever I click on an element in the array, it gets added to the new array at the end

<div class="grid">
  <div class="cell" v-for="item in posts" :key="item">
    <img :class="{active: item.isActive}" :src="item.url" alt width="293px" height="293px" @click="choosePost(item)" />
  </div>
</div>

    choosePost(item) {
    item.isActive = !item.isActive
    if (item.isActive == true) {
      this.selectedPosts.push(item)
    } else this.selectedPosts.splice(????, 1)
  console.log(this.selectedPosts)
},

I am looking to enable removal of an element from the array by clicking on it again. I attempted to use the splice method but struggling with obtaining the index of the selected item. Can you guide me on how to achieve this?

javascript vue.js

Answer 1

Answer №1

If you want to access the index while using v-for, here is how you can do it:

<div class="grid">
  <div class="cell" v-for="(item, index) in posts" :key="item">
    <img
      :class="{ active: item.isActive }"
      :src="item.url"
      width="293px"
      height="293px"
      @click="choosePost(item, index)"
    />
  </div>
</div>

Answer 2

If you want to access the index while using v-for, here is how you can do it:

<div class="grid">
  <div class="cell" v-for="(item, index) in posts" :key="item">
    <img
      :class="{ active: item.isActive }"
      :src="item.url"
      width="293px"
      height="293px"
      @click="choosePost(item, index)"
    />
  </div>
</div>

Answer 3

Answer №2

One way to utilize indexes in a v-for loop is by following this example:

<div class="grid">
  <div class="cell" v-for="(item, index) in posts" :key="item">
    <img :class="{active: item.isActive}" :src="item.url" alt width="293px" height="293px" @click="choosePost(item, index)" />
  </div>
</div>

choosePost(item, index) {
    item.isActive = !item.isActive
    if (item.isActive == true) {
      item["posIndex"] = index;
      this.selectedPosts.push(item)
    } else {
      let pos = this.selectedPosts.map(function(e) { return e.posIndex; }).indexOf(index);
      this.selectedPosts.splice(pos, 1);
    }
  console.log(this.selectedPosts)
},

Answer 4

One way to utilize indexes in a v-for loop is by following this example:

<div class="grid">
  <div class="cell" v-for="(item, index) in posts" :key="item">
    <img :class="{active: item.isActive}" :src="item.url" alt width="293px" height="293px" @click="choosePost(item, index)" />
  </div>
</div>

choosePost(item, index) {
    item.isActive = !item.isActive
    if (item.isActive == true) {
      item["posIndex"] = index;
      this.selectedPosts.push(item)
    } else {
      let pos = this.selectedPosts.map(function(e) { return e.posIndex; }).indexOf(index);
      this.selectedPosts.splice(pos, 1);
    }
  console.log(this.selectedPosts)
},

"Deleting an element from an array with a click of a button

Answer №1

Answer №2

Similar questions

The process of updating UseContext global state in React Native and ensuring that the change is reflected across all screens

Maintaining the state of a React component across page refreshes, with a preference for storing the

Validating usernames using Jquery's remote method检verifying the username

Is there a way I can prompt a download based on the API's response?

Exploring Ways to Utilize kendo-window within an Angular Directive

Using Javascript inside a function along with AJAX incorporated within

Using Javascript to convert numerical input in a text box into its corresponding letter grade

Encountered an issue when trying to establish a connection to the MySQL database on Openshift using a

The combination of Array.pop and Array.indexOf is not functioning as expected

Which is better for privacy: underscored prototype properties or encapsulated variables?

Change a JSON Array into an HTML string that is wrapped using an Angular service

Error encountered when attempting to pass more than one value to a function due to syntax

retrieve the source URL of the track element from an external source

Why You Can Only Use elementByCssSelector Once on TheIntern.io/Selenium

Widget for navigating through Youtube videos

Determine the total by multiplying the value of a dropdown menu and a text input field using jQuery when the values are changed

When selecting a link in JavaScript, it automatically deactivates all other links

The browser returns a 404 error for the Web API POST request, but it is successful when made using PostMan and Swagger

Utilizing Meta Tags to Enable JavaScript Execution within a Chrome Extension

Develop a reusable method/function within a JavaScript class for future use