Question

我正在学习VueJs，而我正试图找出解决问题的最佳解决方案。
问题是，如果我多次拨打this.$set()，则只会注册最后一个电话。

我尝试过使用setTimeout（就像在旧的角度1天一样），但它仍然无法正常工作。
然后我尝试使用Vue.$nextTick()来重新渲染DOM，但似乎数据在对象中的添加速度不够快。

检查演示here 多次按下每个按钮，您将在大多数时间内看到第一个日志被跳过。

Answer 1

Date.now()的使用不正确。它发生得太快，时间戳有时在2 this.$set次操作之间没有变化，所以你覆盖logs对象中的值。

点击第一个按钮

时，查看Date.now()的日志

 1509287060410 // first result of Date.now.
 1509287060412 // Second Result of Date.now - this time, it's different from the first attempt, so 2 different entries will be created.
 1509287061243 // another click on the button - timestamp has changed obviosuly.
 1509287061243 // Javascript did the second Set so far, that time timestamp didn't even changed yet. thus, it overrides the value of the second entry

所以这个日志是4 this.$set次操作的结果，创建了这个logs对象：

{
    1509287060410:"I was clicked!"
    1509287060412:"I was clicked again!"
    1509287061243:"I was clicked again!"
}

最后1509287061243属性被覆盖。

每次调用时，您必须确保 this.$set（函数的第二个参数）的键不同。

请参阅我的新代码建议：

  data() {
    return {
      title: 'Multiple Vue.set() not updating object/DOM',
      logs: {},
      index: 0
    }
  },
  methods: {
    log: function(data) {
      console.log(Date.now())
      this.index += 1
      this.$set(this.logs, this.index, data)
    },

Answer 2

您还可以将日志类型更改为Array。这样，由于密钥覆盖，您不会错过任何日志。例如，

＆＃13;

new Vue({
  el: '#app',
  data() {
    return {
      logs: []
    }
  },
  methods: {
    log(data) {
      this.logs.push({
        time: Date.now(),
        text: data
      })
    },
    logClick() {
      this.log('I was clicked!')
      this.log('I was clicked again!')
    }
  }
})

＆＃13;

<div id="app">
  <button @click="logClick">Log click :)</button>
  <ul v-if="logs">
    <li v-for="(log, i) in logs" :key="i" v-text="log.text"></li>
  </ul>
</div>
<script src="https://unpkg.com/vue"></script>

＆＃13;

多个Vue.set（）不更新对象/ DOM

2 个答案: