VueJS Typescript WebPack，无法通过拼接或删除从数组中删除对象

Question

我试图从vueJS中的数组中删除一个对象，但这是不可能的。

我输入了很多东西，并阅读了一些关于stackoverflow的解决方案，但对我来说没有任何用处。

我的vue.html组件中有一个像这样的虚假列表：

<div class="custo-list-c">
  <div v-for="(item, index) in valuesFounded" 
    @click="addItem(item)"
    v-bind:class="{ 'selected': itemSelected(item) }">
    {{ item.value }}
    <span v-if="itemSelected(item)">
      <i class="fa fa-remove" @click="itemDeleted(item)"></i>
    </span>
  </div>
</div>

我的组件看起来像这样：

import Vue from 'vue';
import Component from 'vue-class-component';
import { Prop, Watch, Emit } from "vue-property-decorator";

@Component({
  name: 'custolist-component',
  template: require('./custo-list.component.vue.html'),
  components: {}
})
export default class CustoListComponent extends Vue {

  public custoListActive: boolean = false;
  public valuesFounded: Array<{key: string, value: string}> = [];

  public selectedItems_: Array<{key: string, value: string}> = [];

  @Prop() list;
  @Watch('list') onListChanged(newList, oldList) {
    // this.list = newList;
  }

  @Prop() placeholder;
  @Watch('placeholder') onPlaceholderChanged(newPlaceholder, oldPlaceholder) {
    // console.log(newPlaceholder);
  }

  @Prop() disabled;
  @Watch('disabled') onDisabledChanged(newDisabled, oldDisabled) {
    // console.log(newPlaceholder);
  }

  public open(event) {
    this.custoListActive = true;
    if (!event.target.value) {
      this.valuesFounded = this.list;
    } else {
      this.valuesFounded = [];
      const re = new RegExp(event.target.value, 'ig');
      for (var i=0; i<this.list.length; i++) {
        if (this.list[i].key.match(re) || this.list[i].value.match(re)) {
          this.valuesFounded.push(this.list[i]);
        }
      }
    }
  }

  public addItem(item: {key: string, value: string}) {

    if (!this.isSelectedItem_(item)) {
      this.selectedItems_.push(item);
      // this.custoListActive = false;
    };

    this.$emit('itemclicked', item);
  }

  public itemSelected(item) {
    return this.isSelectedItem_(item);
  }

  public itemDeleted(item) {
    for (var i=0; i<this.selectedItems_.length; i++) {
      if (item.key == this.selectedItems_[i].key) {
        this.selectedItems_.splice(i, 1);
        break;
      }
    }
    this.$emit('itemdeleted', item);
  }

  private isSelectedItem_(item) {
    const filtered = this.selectedItems_.filter(m => {
      return m.key == item.key;
    });

    return filtered.length > 0;
  }
}

但是当我这样做时this.selectedItems_.splice(i, 1); 那行不通！

谢谢您帮忙

关于我的代码的更多精度。 这是我从数组中删除项目的方法：

public itemDeleted(item) {
  const filtered = this.selectedItems_.filter(m => {
    return m.key != item.key;
  });

  console.log(filtered, this.selectedItems_.length);
  this.selectedItems_ = filtered;
  console.log(this.selectedItems_, this.selectedItems_.length);

  this.$emit('itemdeleted', item);
}

结果在控制台中

安慰

怎么了？

另一个测试：

  public itemDeleted(item) {
    this.selectedItems_ = this.selectedItems_.filter(m => {
      return m.key != item.key;
    });

    this.selectedItems_.splice(this.selectedItems_.length);
    console.log(this.selectedItems_, this.selectedItems_.length);
    this.selectedItems_ = [];
    console.log(this.selectedItems_, this.selectedItems_.length);

    this.$emit('itemdeleted', item);
  }

结果：

安慰

可能是VueJS的错误

对不起，是我的错，更换

<i class="fa fa-remove" @click="itemDeleted(item)"></i>

通过

<i class="fa fa-remove" v-on:click.stop="itemDeleted(item)"></i>

Answer 1

使用for循环和if语句的组合来查找值的多个步骤降低了可读性和代码可预测性。 此外，调用数组变异方法splice可能不会触发此属性的反应式更新。

我建议使用filter并在itemDeleted方法内重新分配selectedItems_ ，如下所示：

public itemDeleted(item) {
  this.selectedItems_ = this.selectedItems_.filter(selectedItem => selectedItem.key !== item.key)
  this.$emit('itemdeleted', item);
}

这样，在方法执行后， selectedItems_将包含所有先前的项目，但作为该方法的参数提供的项目除外，并且所有从属属性都将被重新计算。