Vue中的时刻说这种格式不是一种功能

Question

我有一个Vue.js组件，我正在使用Moment.js来表示日期和时间。

在以下代码中，我在安装组件时设置eventDate的值。后来我使用计算属性来检索它。该值显示正确，但我收到一个控制台错误，指出this.eventDate.format不是函数。为什么呢？

<script>
    import moment from 'moment';

    export default {
        data () {
            return {
                eventDate : ''
            }
        },
        computed : {
            eventShortDate () {
                // console.log(this.eventDate);
                return this.eventDate.format('DD-MM');
            }
        },
        mounted() {
            this.eventDate = moment(document.getElementById('event-date').innerHTML, 'DD-MM-YY');
        }
    }
</script>

Chrome开发工具说eventDate是一个对象。当我console.log(this.eventDate)时，它显示我有一个Moment对象。

我尝试直接在Vue模板中使用eventDate，如{{ eventDate.format('DD-MM') }}但是再一次，值显示正确，但我收到了控制台错误。

Answer 1

在调用{{ }}之前评估模板对象（.mounted()大括号中的内容）。因此，在.format ''之前.mounted()可以将eventDate值更改为时刻对象。但是，一旦在.mounted()中更改了值，它就会触发另一个渲染，从而导致显示正确的值。

我建议v-if尝试使用{{ eventDate.format('DD-MM') }}或eventDate !== ''事件句柄有条件地呈现.created()。

这个Vue.js guide有一个非常棒的diagram，我认为很好地说明了Vue生命周期是如何工作的。