LocalStorage cleared only on refresh and not on click using vuejs methods-CodePudding

Want to clear TODO list's local storage on click.

It's working but the list becomes empty only when I refresh the page. The problem is that I want it to show when I click it, not when I refresh the page.

<button  @click="deleteToDo()">Supprimer</button>

methods: {
  deleteToDo() {
    localStorage.removeItem('todos')
  }
},

CodePudding user response：

You need to empty the data bound to template. For example, if you bind an array todos to template:

<template>
  <div v-for="(todo, i) in todos" :key="i">{{...}}</div>
</template>

<script>
/*...*/
  methods: {
    deleteToDo() {
      localStorage.removeItem('todos')
      this.todos = []  // add this line
    }
  },
/*...*/
</script>