Deleting the value inside a multidimensional array using Vue.JS

Question

Good morning,

I have the following form:

When you click the 'New Item' button, a new textfield is added to the relevant section. If you click the 'New Section' button, a new section is created. When you click the 'X' in the top right of the section, the section successfully deletes. However, I'm trying to implement the 'X' below (on the right) of each 'Addition' Text Field. I thought, it would be the inverse code of adding an additional text field, but using the splice() function. This however doesn't work.

My code is below, any help would be greatly appreciated.

var app = new Vue({
  el: '.container',
  data: {
    sections: [{
      item: '',
      additionals: []
    }]

  },
  methods: {
    addNewSection() {
      this.sections.push({
        item: '',
        additionals: []
      })
    },
    addNewItem(id) {
      this.sections[id].additionals.push({
        item: ''
      })
    }
  }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="app">
  <div class="container">
    <button class="btn btn-success mt-5 mb-5" @click="addNewSection">
                New Deal Section
            </button>

    <div class="card mb-3" v-for="(section, index) in sections">
      <hr>
      <div class="card-body">
        <button class="btn btn-success mt-5 mb-5" @click="addNewItem(index)">
                        New Item
                    </button>

        <span class="float-right" style="cursor:pointer">
                        X
                    </span>

        <h4 class="card-title">Deal section {{ index + 1}}</h4>

        <div class="employee-form" v-for="(addition, index) in section.additionals">
          <input type="text" class="form-control mb-2" placeholder="Item" v-model="addition.item">
        </div>

        <div class="employee-form">
          <input type="text" class="form-control mb-2" placeholder="Item" v-model="section.item">
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/qs6t9L7x/8/

When you click the 'X' in the top right of the section, the section successfully deletes. it doesn't delete in your fiddle :/ — Alexandre Elshobokshy
– Alexandre Elshobokshy, Commented Oct 2, 2018 at 9:49
Please include all of your code in your fiddle aka even the code that doesn't work — George
– George, Commented Oct 2, 2018 at 9:50
Apologies. Not sure what happened with the jsfiddle. I've updated it — JamMan9
– JamMan9, Commented Oct 2, 2018 at 9:59
@JamLis this.sections[index].additionals.splice(indexSection,1) not this.sections[index].additionals[indexSection].splice(indexSection,1) 😊 — George
– George, Commented Oct 2, 2018 at 10:01
@George Thankyou! Do you want to answer the question so I can mark it? — JamMan9
– JamMan9, Commented Oct 2, 2018 at 10:03

George · Accepted Answer · 2018-10-02 10:03:41Z

Your problem is this this.sections[index].additionals[indexSection].splice(indexSection,1)

You're calling spice on the object, not the array!

change it to this.sections[index].additionals.splice(indexSection,1) and it works wonderfully

var app = new Vue({
  el: '.container',
  data: {
    sections: [{
      item: '',
      additionals: [] // <-
    }]

  },
  methods: {
    addNewSection() {
      this.sections.push({
        item: '',
        additionals: [] // <-
      })
    },
    addNewItem(index) {
      this.sections[index].additionals.push({
        item: ''
      })
    },
    deleteSection(index) {
      this.sections.splice(index, 1)
    },
    deleteAdditional(index, indexSection) {
      console.log(index, indexSection)
      //this.sections[index].additionals.splice(index,1)
      this.sections[index].additionals.splice(indexSection, 1)
    }
  }
})

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="app">
  <div class="container">
    <button class="btn btn-success mt-5 mb-5" @click="addNewSection">
                        New Deal Section
                    </button>

    <div class="card mb-3" v-for="(section, index) in sections">
      <hr>
      <div class="card-body">
        <button class="btn btn-success mt-5 mb-5" @click="addNewItem(index)"> <!-- passing the index -->
                                New Item
                            </button>

        <span class="float-right" style="cursor:pointer" @click="deleteSection(index)">
                                X
                            </span>

        <h4 class="card-title">Deal section {{ index + 1}}</h4>

        <div class="employee-form">
          <input type="text" class="form-control mb-2" placeholder="Item" v-model="section.item">
        </div>

        <div class="employee-form" v-for="(addition, indexSection) in section.additionals">
          <!-- additionals of the section -->

          <input type="text" class="form-control mb-2" placeholder="Addition" v-model="addition.item">

          <span class="float-right" style="cursor:pointer" @click="deleteAdditional(index,indexSection)">
                                    X
                                </span>
        </div>
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Deleting the value inside a multidimensional array using Vue.JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related