Vue刪除數組的幾種方法

一、從Vue數組中刪除某個元素

Vue數組中刪除某個元素是比較簡單的，可以用splice()方法實現，但需注意每次刪除後都需要實時更新Vue視圖。

<template>
  <div>
    <p v-for="(item, index) in arr" :key="index">
      {{ item }}
      <button @click="removeItem(index)">刪除</button>
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [1, 2, 3, 4, 5, 6]
      }
    },
    methods: {
      removeItem(index) {
        this.arr.splice(index, 1);
      }
    }
  }
</script>

二、Vue刪除數組一項並更新

在Vue中通過刪除數組一項，需要及時更新視圖，可以使用Vue.$set()方法實現。實現過程為：先將要刪除的元素下標取出來，然後利用splice刪除，最後使用Vue.$set更新Vue視圖。

<template>
  <div>
    <p v-for="(item, index) in arr" :key="index">
      {{item.name}} - {{item.age}}
      <button @click="removeItem(index)">刪除</button>
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}, {name: 'Lucky', age: 22}]
      }
    },
    methods: {
      removeItem(index) {
        this.arr.splice(index, 1);
        this.arr.forEach((item, i) => {
          this.$set(this.arr, i, item);
        });
      }
    }
  }
</script>

三、Vue刪除數組中的某個對象

假設數組中為對象數組，則刪除某個元素，則需要利用索引來刪除對象，具體實現方法與刪除數組元素相同。

<template>
  <div>
    <p v-for="(item, index) in arr" :key="index">
      {{item.name}} - {{item.age}}
      <button @click="removeItem(index)">刪除</button>
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}, {name: 'Lucky', age: 22}]
      }
    },
    methods: {
      removeItem(index) {
        this.arr.splice(index, 1);
        this.arr.forEach((item, i) => {
          this.$set(this.arr, i, item);
        });
      }
    }
  }
</script>

四、Vue刪除數組元素的方法

除了splice()方法以外，還有pop()、shift()、 unshift()、slice()等方法可以刪除數組元素，需要根據具體業務需求選擇。

// 使用pop()刪除數組尾部元素
arr.pop();
// 使用shift()刪除數組頭部元素
arr.shift();
// 使用unshift()在數組頭部插入一項
arr.unshift(newElement);
// 使用slice()截取指定區間內的元素
arr.slice(start, end);

五、Vue刪除數組中的一條數據

Vue中可以用filter()方法刪除數組中符合指定條件的元素，刪除之後通過$set()方法更新視圖。

<template>
  <div>
    <p v-for="(item, index) in arr" :key="index">
      {{item.name}} - {{item.age}}
      <button @click="removeItem(item)">刪除</button>
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [{name: 'Tom', age: 18}, {name: 'Jerry', age: 20}, {name: 'Lucky', age: 22}]
      }
    },
    methods: {
      removeItem(item) {
        this.arr = this.arr.filter(elem => elem !== item);
        this.arr.forEach((item, i) => {
          this.$set(this.arr, i, item);
        });
      }
    }
  }
</script>

六、Vue刪除數組中的元素

除了使用splice()方法以外，還可以使用delete運算符或者Vue.delete()方法刪除數組中的元素。

// 使用delete運算符
delete arr[index];

// 使用Vue.delete()方法
Vue.delete(arr, index);

七、Vue刪除數組某一項

除了直接修改數組以外，還可以通過新建一個數組，將不需要刪除的元素添加進去，實現保留指定元素，刪除其他元素的效果。

<template>
  <div>
    <p v-for="(item, index) in newarr" :key="index">
      {{item}}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [1, 2, 3, 4, 5, 6],
        index: 2,
        newarr: []
      }
    },
    mounted() {
      this.newarr = this.arr.filter((item, index) => index !== this.index);
    }
  }
</script>

八、Vue刪除數組移除指定元素

與上述保留指定元素的方法相反，此處需要將指定元素以外的元素保留下來。

<template>
  <div>
    <p v-for="(item, index) in newarr" :key="index">
      {{item}}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [1, 2, 3, 4, 5, 6],
        index: 2,
        newarr: []
      }
    },
    mounted() {
      this.newarr = this.arr.filter((item, index) => index === this.index);
    }
  }
</script>

九、Vue刪除數組空白元素

空白元素指的是數組中的空值、null、undefined等。可以使用filter()方法將數組中的空白元素過濾出來。

<template>
  <div>
    <p v-for="(item, index) in newarr" :key="index">
      {{item}}
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [1, null, 3, undefined, 5, '', 7],
        newarr: []
      }
    },
    mounted() {
      this.newarr = this.arr.filter(item => item !== null && item !== undefined && item !== '');
    }
  }
</script>

總結

Vue中刪除數組元素的方法有很多種，主要包括splice()方法、pop()、shift()、unshift()、slice()等，需要根據具體業務需求來選擇。在刪除元素後，一定要注意即時更新Vue視圖。