CODEWITHSUNDEEP
javascriptvue.js
Kapil Paul
Kapil Paul

Reputation: 446

Array Splice always delete an item from last?

I am facing a problem in deleting item from an array. Array splice supposed to work but its not working like I want. Its always delete the item from last. I am using Vue.js . I am pushing item dynamically to an array. But after click remove its delete from the last. why I am facing this. I am attaching the codes.

<template>
<div>
    <span class="badge badge-pill mb-10 px-10 py-5 btn-add" :class="btnClass" @click="addBtn"><i class="fa fa-plus mr-5"></i>Button</span>


        <div class="block-content block-content-full block-content-sm bg-body-light font-size-sm" v-if="buttons.length > 0">
            <div v-for="(item, index) in buttons">
                <div class="field-button">
                    <div class="delete_btn"><i @click="remove(index)" class="fa fa-trash-o"></i></div>
                    <flow-button v-model="item.title" :showLabel="false" className="btn btn-block min-width-125 mb-10 btn-border" mainWrapperClass="mb-0" wrapperClass="pt-0" placeholder="Button Title"></flow-button>
                </div>
            </div>
        </div>
    </div>
</div>
</template>
<script>
    import flowButton from '../assets/flow-button'

export default {
    name: "textArea",
    props:{
        index : Number
    },
    data() {
        return {
            buttons : [],
            btnClass : 'badge-primary',

        }
    }
    components : {
        flowButton
    },
    methods : {
        addBtn () {
            if(this.buttons.length >= 2) {
                this.btnClass = 'btn-secondary'
            }

            if(this.buttons.length < 3) {
                this.buttons.push({
                    title : ''
                });

            }
        },
        remove(index) {
            this.buttons.splice(index, 1)
        }
    }
}
 </script>

Upvotes: 3

Views: 2548

Answers (3)

Prosenjit
Prosenjit

Reputation: 11

Try this. Removing an item correctly using this.

<div v-for="(item, ind) in buttons" :key="JSON.stringify(item)">

Upvotes: 0

Luxknight007
Luxknight007

Reputation: 182

This must be because of your flow-button I have tried to replicate your error but endup to this code. I just replaced the flow-button with input and it works. Try the code below.

Use v-bind:key="index", When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of track-by="$index"

You have missing comma between data and components, I remove the component here it won't cause any error now, and more tips don't mixed double quotes with single qoutes.

<template>
<div>
<span class="badge badge-pill mb-10 px-10 py-5 btn-add" :class="btnClass" @click="addBtn"><i class="fa fa-plus mr-5"></i>Button</span>
  <div class="block-content block-content-full block-content-sm bg-body-light font-size-sm" v-if="buttons.length > 0">
    <div v-for="(item, index) in buttons" v-bind:key="index">
      <div class="field-button">
        <div class="delete_btn"><i @click="remove(index)" class="fa fa-trash-o">sdfsdff</i></div>
        <input type="text" v-model="item.title" :showLabel="false" className="btn btn-block min-width-125 mb-10 btn-border" mainWrapperClass="mb-0" wrapperClass="pt-0" placeholder="Button Title"/>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  name: 'textArea',
  props: {
    index: Number
  },
  data () {
    return {
      buttons: [],
      btnClass: 'badge-primary'
    }
  },
  methods: {
    addBtn () {
      if (this.buttons.length >= 2) {
        this.btnClass = 'btn-secondary'
      }
      if (this.buttons.length < 3) {
        this.buttons.push({
          title: ''
        })
      }
    },
    remove (index) {
      this.buttons.splice(index, 1)
    }
  }
}
</script>

Upvotes: 2

Hammerbot
Hammerbot

Reputation: 16324

I think that you may be facing a conflict with the index prop of your component. Try to use a different name for the index of your v-for loop:

<div v-for="(item, ind) in buttons">
    <div class="field-button">
        <div class="delete_btn"><i @click="remove(ind)" class="fa fa-trash-o"></i></div>
        <flow-button v-model="item.title" :showLabel="false" className="btn btn-block min-width-125 mb-10 btn-border" mainWrapperClass="mb-0" wrapperClass="pt-0" placeholder="Button Title"></flow-button>
    </div>
</div>

Upvotes: 1

Related Questions