Adding and deleting VueJS form input

Question

i am new to vue js, i have one "iban" entry that I want to do and when "add iban" button is clicked, first entry "delete" range should be added and when I want to delete it starts from above, I think I made a mistake. Thanks already for your help.

<template>
    <div class="col-12" v-for="(section, index) in sections">
        <div class="mb-1 row">
            <div class="col-sm-3">
                <label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
            </div>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="iban" v-model="section.item">
            </div>
        </div>

        <div class="mb-1 row" v-for="(addition, index) in section.additionals">
            <div class="col-sm-3">
                <label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
            </div>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Item" v-model="addition.item">
                <span class="float-right" style="cursor:pointer" @click="removeItem(index)">X</span>
            </div>
        </div>
        <button class="btn btn-success mt-5 mb-5" @click="addNewItem(index)">New Iban</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            data: {
                iban: "",
            },
            sections: [
                {
                    item: '',
                    additionals: [] 
                }
            ]
        }
    },
    methods: {
        addNewItem(id) {
            this.sections[id].additionals.push({
                item: ''
            })
        },
        removeItem(index){
            this.sections[index].additionals.splice(index,1)
        },
    },
}
</script>

Salvino D'sa · Accepted Answer · 2021-08-17 14:26:22Z

1

Looking at your updated post & images, I think you are looking for the following:

new Vue({
  el: "#app",
  data() {
    return {
      data: {
        iban: "",
      },
      sections: [{
        ibans: [{item: ""}]
      }]
    }
  },
  methods: {
    addNewItem(id) {
      this.sections[id].ibans.push({item: ''});
    },
    removeItem(sectionIndex, ibanIndex) {
      this.sections[sectionIndex].ibans.splice(ibanIndex, 1);
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template>
    <div class="col-12 sections" v-for="(section, sectionIndex) in sections">
      <div class="mb-1 row" v-for="(iban, ibanIndex) in section.ibans">
        <div class="col-sm-3">
          <label class="col-form-label" for="iban"><span><i data-feather='file-text'></i></span>IBAN NUMBER</label>
        </div>
        <div class="col-sm-6">
          <input type="text" class="form-control" placeholder="Item" v-model="iban.item">
          <span v-if="section.ibans.length>1"
          class="float-right" style="cursor:pointer" @click="removeItem(sectionIndex, ibanIndex)">X</span>
        </div>
      </div>
      <button class="btn btn-success mt-5 mb-5" @click="addNewItem(sectionIndex)">New Iban</button>
    </div>
  </template>
</div>

edited Aug 17, 2021 at 14:26

answered Aug 17, 2021 at 3:40

Salvino D'sa

4,5761 gold badge14 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

20 Comments

Selaminko Elam Over a year ago

thank you for your reply but the first input "delete" button is not added

Salvino D'sa Over a year ago

hold on, let me update the answer. @SelaminkoElam

Salvino D'sa Over a year ago

Quick question @SelaminkoElam what should be the initial state? Just a New Iban button? Also, what should happen when you click on the delete of the first input? Could you please elaborate on what do you mean by 'first entry "delete" range should be added and when I want to delete it starts from above'?

Selaminko Elam Over a year ago

There is the first iban or I want the original input "deletion" added.

Salvino D'sa Over a year ago

okay, and what should happen on click of the deletion button next to the first input box? should all the additional inputs be removed? Can you check this demo and see if this is the output you want?

|

Ork Sophanin · Accepted Answer · 2021-08-17 03:17:15Z

I think this code could help you.

<template>
  <div class="col-12">
    <div
      class="mb-1 row"
      v-for="(item, index) in sections.additionals"
      :key="index"
    >
      <div class="col-sm-3">
        <label for="iban" class="col-form-label">
          <span><i data-feather="file-text"></i></span>IBAN NUMBER
        </label>
      </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" id="iban" v-model="item.item" />
        <span
          class="float-right"
          style="cursor: pointer"
          @click="removeItem(index)"
          >X</span
        >
      </div>
      <button class="btn btn-success mt-5 mb-5" @click="addNewItem">
        New Iban
      </button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        iban: "",
      },
      sections: { additionals: [{ item: "" }] },
    };
  },
  methods: {
    addNewItem() {
      this.sections.additionals.push({
        item: this.data.iban,
      });
    },
    removeItem(index) {
      this.sections.additionals.splice(index, 1);
    },
  },
};
</script>

Collectives™ on Stack Overflow

Adding and deleting VueJS form input

2 Answers 2

20 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

20 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related