1

我正在尝试构建一个 Vue 组件，该组件显示 a 的小时和分钟，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
    }
  }
})
4

1 回答 1

0

里面的对象meeting.startDate总是一样的，所以它不会触发任何东西。

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

const newDate = this.date

至：

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

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

于 2019-04-25T19:39:46.863 回答