在 Vue.js 中使用月份数据格式过滤 WordPress 帖子

Question

我想知道使用 Vue.Js 中的月份数据格式过滤 WordPress 帖子的最佳方法是什么

我通过 WP_JSON 帖子获取数据，这很棒，但我需要创建一个下拉列表，例如当用户选择月份“九月”时，页面将仅显示 9 月创建的帖子。

我再次使用Vue.js

任何帮助都会很棒。

谢谢你。

Answer 1

您可以使用过滤器，例如：

Vue.filter('filterByMonth', function(posts, selectedMonth) {
  if (selectedMonth === 0) {
    return posts; // Return all
  }
  return posts.filter(post => {
    const postDate = new Date(post.date);
    const postMonth = postDate.getMonth() + 1; // Months are indexed from 0
    return postMonth === selectedMonth;
  });
});

然后在模板中您可以使用一些下拉菜单

<template>
  <div>
    <label for="monthSelect">Select Month:</label>
    <select id="monthSelect" v-model="selectedMonth">
      <option value="0">All</option>
      <option value="1">January</option>
      <option value="2">February</option>
      <!-- Add options for all months -->
    </select>
    <ul>
      <li v-for="post in filteredPosts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

最后一步，您需要定义模板和变量并连接过滤器。

export default {
  data() {
    return {
      selectedMonth: 0, // Default to All
      posts: [ /* Your WordPress posts array here */ ]
    };
  },
  computed: {
    filteredPosts() {
      return this.$options.filters.filterByMonth(this.posts, this.selectedMonth);
    }
  }
};