Vue 组件不呈现对象的更改（尽管使用了 $set）

Question

我正在尝试构建一个显示 Date 的小时和分钟并在按下 + 或 - 按钮时发出更改版本的 Vue 组件。

截图：https://i.imgur.com/hPUdrca.png （没有足够的声誉 post 图片）

使用 Vue.js Devtools（在 Google Chrome 中）我观察到：

更改事件触发并包含正确的日期
date 道具已正确更新

它只是不重新呈现日期。

https://jsfiddle.net/JoshuaKo/6c73b2gt/2

<body>
  <div id="app">
    <time-input :date="meeting.startDate"
                @change="$set(meeting, 'startDate', $event)"
                ></time-input>
    <p>
      {{meeting.startDate.toLocaleString()}}
    </p>
  </div>
</body>

Vue.component('time-input', {
  props: {
    date: Date,
    minuteSteps: {
      type: Number,
      default: 1
    }
  },
  methods: {
    increaseTime: function() {
      if (!this.date) return
      const newDate = this.date
      newDate.setMinutes(this.date.getMinutes() + this.minuteSteps)
      this.$emit('change', newDate)
    },
    decreaseTime: function() {
      if (!this.date) return
      const newDate = this.date
      newDate.setMinutes(this.date.getMinutes() - this.minuteSteps)
      this.$emit('change', newDate)
    },
    time: function() {
      if (!this.date) return '??:??'
      const h = this.date.getHours().toString()
      const m = this.date.getMinutes().toString()
      return _.padStart(h, 2, '0') + ':' + _.padStart(m, 2, '0')
    }
  },
  computed: {
  },
  template: `
<div class="time">
  <button :disabled="!date" class="control" @click="decreaseTime">-</button>
  <span>{{time()}}</span>
  <button :disabled="!date" class="control" @click="increaseTime">+</button>
</div>
  `.trim()
})

const app = new Vue({
  el: '#app',
  data: {
    meeting: {
      name: 'test meeting',
      startDate: new Date(),
      endDate: null
    }
  }
})

Answer 1

meeting.startDate中的对象始终相同，因此不会触发任何内容。

您应该每次都创建一个新的 Date 对象，因此更改以下行：

const newDate = this.date

至：

const newDate = new Date(this.date.getTime())

此外，$set（Vue.set 的别名）旨在添加必须响应的属性。由于没有添加属性（只是修改），所以这里不需要它。

Vue 组件不呈现对象的更改（尽管使用了 $set）

Vue Component does not render changes of object (despite $set being used)

vue.js

vue-component

vuejs2

vue-reactivity