Vue.js는 항상 마지막 항목을 어레이에서 삭제합니다.

Vue.js는 항상 마지막 항목을 어레이에서 삭제합니다.

필터 추가 버튼을 클릭하면 필터가 복제되어 필터가 어레이에 추가됩니다.추가할 문제는 없지만 올바른 입력을 삭제할 수 없습니다(크로스 아이콘). 항상 올바른 항목이 아닌 마지막 항목을 어레이에서 삭제합니다.코드는 다음과 같습니다.

<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>

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')

문제는 예를 들어 3개의 필터를 추가했을 때 첫 번째 필터를 삭제하려고 하면 항상 마지막 필터가 삭제됩니다.왜 이런 일이 일어나고 있는지, 아니면 제가 뭘 잘못하고 있는지요?

여기 jsFiddle에 대한 내 문제가 있다.가장 좋은 답은 jsFiddle에도 있습니다.

정답은...https://jsfiddle.net/mariaczi/hed0ew5o/1/

추가하지 않았습니다.v-model='filter.text'모든 필터가 동일하게 보이게 하는 텍스트 입력이 작동하지 않았던 이유이기도 합니다.

정상적으로 동작하고 있습니다.

도움이 됐으면 좋겠다.

언급URL : https://stackoverflow.com/questions/41610874/vue-js-remove-always-last-item-from-array