Adding and deleting VueJS form input

user_16666661 0
Viewed 645

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.

enter image description here

<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>
vuejs3 laravel javascript
2 Answers

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>

user_160465210

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>

user_141046770
Related