如何在nuxt / vue.js中按类别过滤帖子？

Question

我正在尝试通过选择类别来显示帖子。我被困在按类别过滤帖子。我想使用单选按钮将其过滤掉。我搜索了有关该问题的类似解决方案，但无法将其应用于我的案子。我尝试使用带计算的过滤器函数的v-model指令，但出现未定义的帖子错误。我在Nuxt / VueJs上还很新，所以我真的希望有人能给我任何建议。非常感谢！

这里是我使用的代码：

<div>
    <div>
        <div id="list" class="container mt-4 ">
            <div class="flex flex-row items-center justify-center">
                <input type="radio"> All
                <div class="ml-2" v-for="post in posts" :key="post.id">
                    <input type="radio" >
                    <label class="ml-2"> {{post.category}} </label>
                </div>
            </div>
            <div class="flex flex-col items-center" v-for="post in posts" :key="post.id">
                <h1 class="text-4xl"> {{ post.title }} </h1>
                <h2 class="text-xl"> {{ post.preText }} </h2>
                <h3 class="text-xs"> {{ post.text }} </h3>
                <h4 class="text-sm"> {{ post.category }} </h4>
            </div>
            <div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
const axios = require('axios')
let url = "https://spreadsheet.glitch.me/?key=1KozD-SrBoDE7sa2_5EHPFwbVO3znWa8V8LpNDw_jfZ8"

export default {

    async asyncData() {
        const response = await axios.get(url)
        const posts = response.data;
        const categories = posts.map(({
            category
        }) => category);

        return {
            posts,
            categories,       

        }

    },   

};
</script>

Answer 1

这不是真正的Nuxt问题，而是如何处理异步请求。

您可以在下面看到一个处理异步请求并显示您提到的过滤器的代码段：

new Vue({
  el: "#app",
  data: {
    posts: [],
    filteredPosts: []
  },
  computed: {
    catFilter() {
      return Array.from(new Set(this.posts.map(e => e.category)))
    }
  },
  methods: {
    filterPosts(event) {
      if (event === '') {
        this.filteredPosts = this.posts
      } else {
        this.filteredPosts = this.posts.filter(e => {
          return e.category === event.target.value
        })
      }
    },
    fetchPosts() {
      // return fetch('https://jsonplaceholder.typicode.com/posts/')
      return fetch('https://spreadsheet.glitch.me/?key=1KozD-SrBoDE7sa2_5EHPFwbVO3znWa8V8LpNDw_jfZ8')
        .then(response => response.json())
        .then(json => {
          // console.log(json)
          return json
        })
    }
  },
  async mounted() {
    this.posts = await this.fetchPosts()
    this.filteredPosts = this.posts
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>Post roll:</h1>
  <div>
    <button @click="filterPosts('')">RESET</button>
    <label v-for="filter in catFilter" :for="filter">{{filter}}
    <input :id="filter" type="radio" name="catfilter" :value="filter" @change="filterPosts($event)"/>
    </label>
  </div>
  <ol>
    <li :key="post.id" v-for="post in filteredPosts">
      <h3>{{post.title}}</h3>
      <div>{{post.preText}}</div><br />
      <div>{{post.text}}</div><br />
      <div>{{post.category}}</div><br />
    </li>
  </ol>
</div>