vue.js - 尝试清除字典时 Vue.js DOM 未更新

Question

jsfiddle

我有一本由 v-for 循环呈现的字典，我想将字典设置为空白字典。我已经尝试使用 this.dict = {} 并在所有键上使用 Vue.delete，这些会更新控制台中的字典，但不会重新渲染 DOM。如何清除此字典以便在 DOM 中重新呈现它。

html

<ol>
  <li v-for="item in Object.keys(todos)">
    <label>{{item}}:{{todos[item]}}</label>
  </li>
</ol>
<button v-on:click = "reset()">reset</button>

js

new Vue({
  el: "#app",
  data: {
    todos: {"a" : "b"}
  },
  methods: {
    reset: function(){
      this.todos = {};
      console.log(this.todos);
      Vue.delete(todos, "a");
      Vue.set(todos, "a", "");
    }.bind(this)
  }
})

标签： vue.js

Answer 1

像这样重写组件：

   new Vue({
     el: "#app",
     data: {
            todos: {"a" : "b"}
           },
     methods: {
       reset(){
              this.todos = {};
              console.log(this.todos);
              Vue.delete(todos, "a");
              Vue.set(todos, "a", "");
             }
     }
  })