Vue Component не отображает изменения объекта (несмотря на использование $ set) - PullRequest
Новая
       45

Vue Component не отображает изменения объекта (несмотря на использование $ set)

1 голос
/ 25 апреля 2019

Я пытаюсь создать компонент Vue, который отображает часы и минуты Date и выдает измененную версию при нажатии кнопки + или -.

Снимок экрана: https://i.imgur.com/hPUdrca.png(недостаточно репутации для публикации изображения)

Использование Devtools Vue.js (в 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
    }
  }
})

1 Ответ

0 голосов
/ 25 апреля 2019

Объект в meeting.startDate всегда одинаков, поэтому он ничего не вызывает.

Вы должны каждый раз создавать новый объект Date, поэтому меняйте строки: 

const newDate = this.date
*От 1006 * до: 
const newDate = new Date(this.date.getTime())

Кроме того, $set (псевдоним Vue.set) предназначен для добавления свойств, которые должны быть реактивными.Поскольку никакие свойства не добавляются (только изменяются), они вам здесь не нужны.

...