Vue 中的 Moment 表示格式不是函数

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() 之前进行评估。因此，在 .mounted() 可以将 eventDate 值更改为 moment 对象之前，对 '' 进行了 .format 调用。但是，一旦 .mounted() 中的值发生更改，它就会触发另一个渲染，从而导致显示正确的值。

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

我认为这个 Vue.js guide has a pretty great diagram 很好地说明了 Vue 生命周期的工作原理。

Vue 中的 Moment 表示格式不是函数

Moment in Vue says that format is not a function

momentjs

vue.js