Question

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

屏幕截图：https://i.imgur.com/hPUdrca.png （信誉不足，无法发布图片）

使用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）

1 个答案: