Vue.js remove always last item from array

Question

I'm trying to have a simple filter where when I click on button "add filter" I will duplicate filter and it will add to array with filters. There is no problem to add but then I cannot remove (cross icon) the right input - I always remove the last item from array instead the right one. I have this code:

<div class="container">

  <div class="jumbotron">
    <div>
      <div class="form-group">
        <input type="text" class="form-control input-sm" id="pref-search">
      </div>
      <div class="form-group">
        <button type="button" class="btn btn-default filter-col btn-sm" v-on:click="addFilter">
          <i class="fa fa-plus-circle" aria-hidden="true"></i> Add filter
        </button>
      </div>
    </div>

    <div v-for="filter in extFilters.filters" style="margin: 10px 0">
      <div class="form-group">
        <input type="text" class="form-control input-sm" id="pref-search">
      </div>
      <div class="form-group">
        <button type="button" class="btn btn-default filter-col btn-sm" v-on:click="addFilter">
          <i class="fa fa-plus-circle" aria-hidden="true"></i> Add filter
        </button>
        <span v-on:click="removeFilter(filter)"><i class="fa fa-times" aria-hidden="true"></i></span>
      </div>
    </div>
  </div>
</div>

And here is Vue.js:

var data = {
  'filters': [],
}

// app Vue instance
var app = new Vue({
  // app initial state
  data: {
    extFilters: data,
  },

  // methods that implement data logic.
  methods: {
    addFilter: function() {
      this.extFilters.filters.push({
        andor: 'a',
        search_in: '',
        operator: '',
        text: ''
      })
    },

    removeFilter: function(filter) {
      var index = this.extFilters.filters.indexOf(filter);
      this.extFilters.filters.splice(index, 1);
    },
  },
})

// mount
app.$mount('.jumbotron')

Problem is when I add for example three filters and I would like to remove first filter then it will remove always the last one. Why it is happening or what I'm doing wrong?

Here is my problem on jsFiddle. Best answer would be also in jsFiddle.

because you using var index = this.extFilters.filters.indexOf(filter); , always return first filtter from the list. change the indexOf() function — L. Vadim
– L. Vadim, Commented Jan 12, 2017 at 10:50

Marek Urbanowicz · Accepted Answer · 2017-01-12 11:01:37Z

3

Correct answer is... https://jsfiddle.net/mariaczi/hed0ew5o/1/

You did not add v-model='filter.text' to the text input which makes all your filters looking the same, that's why it was not working.

Working properly now.

Hope it helps.

edited Jan 12, 2017 at 11:01

answered Jan 12, 2017 at 10:55

Marek Urbanowicz

13.8k19 gold badges68 silver badges93 bronze badges

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

1 Comment

EranSch Over a year ago

Might be worth updating the fiddle to reflect that the original removeFilter function worked as implemented and the missing binding was the only issue.

Collectives™ on Stack Overflow

Vue.js remove always last item from array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related