Vue 3 - Vue.delete alternative Vue 3 - Vue.delete alternative vue.js vue.js

Vue 3 - Vue.delete alternative


Vue.delete and Vue.set aren't needed in Vue 3. With the new reactivity system using proxies, Vue is able to detect all changes to reactive data.

You can use JavaScript's delete operator:

delete obj[key]

Here's a Vue 3 demo removing and adding object properties with vanilla JavaScript:

const { createApp, reactive } = Vue;const app = createApp({  setup() {    const obj = reactive({ a: 1, b: 2, c: 3 })    return { obj }  }});app.mount("#app");
<div id="app">  Object: {{ obj }}  <hr>  <template v-for="(item, key) in obj">    <button @click="delete obj[key]">Delete key {{ key }}</button>  </template>  <button @click="obj['z'] = 'Added'">Add key z</button></div><script src="https://unpkg.com/vue@next"></script>