如何显示Vue.js和firebase中未过期的元素？

<template>
  <div>
    <div v-for="element in elements" :key="element.id">
      <div v-if="!isExpired(element)">
        {{ element.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elements: [] // 元素数组
    };
  },
  methods: {
    isExpired(element) {
      // 判断元素是否过期的逻辑
      // 可以使用元素的过期时间与当前时间进行比较
      // 返回 true 表示已过期，返回 false 表示未过期
    }
  }
};
</script>

import firebase from 'firebase';

export default {
  created() {
    // 初始化 Firebase
    firebase.initializeApp({
      // Firebase 配置信息
    });

    // 获取元素数据
    const elementsRef = firebase.database().ref('elements');
    elementsRef.on('value', snapshot => {
      this.elements = snapshot.val();
    });
  }
};

{
  "elements": {
    "element1": {
      "name": "Element 1",
      "expirationDate": "2022-12-31"
    },
    "element2": {
      "name": "Element 2",
      "expirationDate": "2023-06-30"
    },
    ...
  }
}

isExpired(element) {
  const expirationDate = new Date(element.expirationDate);
  const currentDate = new Date();
  return expirationDate < currentDate;
}