V-for remove element

Question

I'm working on a Vue/Quasar app and what I want to do is show the following layout only once when the page is loaded:

<template>
  <div v-for="(section, index) in sections" :key="index">
    <div class="row q-gutter-md">
      <q-input v-model="sectionName" bottom-slots dense :label="labelText">
        <template v-slot:append>
          <q-btn flat dense icon="add" color="grey " @click="addNew" />
          <q-btn flat dense icon="delete" color="grey " @click="removeSection" />
        </template>
      </q-input>
    </div>
  </div>
</template>

Here is the code snippet from the script section:

    setup() {
    const sections = ref(1);
    const addNew = () => {
      sections.value++
    };
    const removeSection = () => {
     //...
    };
    return{
     //...}

The addNew function works well: new sections will be added to the screen. But how could I remove a particular (which was clicked) section? What should I change?

Answer 1

You can send a parameter to your removeSection function (ex: index) after that once you clicked on delete button you will know which index should be deleted. You will be able to find the item in your sections that you wanted to delete.