如何在nuxt js中声明条件语句答案

【问题标题】：How to declare condition statement in nuxt js如何在nuxt js中声明条件语句
【发布时间】：2020-04-20 13:29:09
【问题描述】：

我在 nuxt js 中使用 Wordpress API 显示数据。我尝试在类别明智的示例中显示数据，其中 ('post.category', '=', 'categoryName') vuejs/nuxtjs 中的语法是什么。

有可能吗？

脚本：

import axios from 'axios'
export default {
  data() {
    return {
      posts: []
    }
  },
  asyncData() {
    return axios.get('http://localhost/wordpress/wp-json/wp/v2/posts')
      .then(res => {
        return {
          posts: res.data
        }
      })
  }
}

模板

<div class="col-lg-4" v-for="post in posts" :key="post.id">
    <div class="news-post image-post">
        <img :src="post.fi_300x180">
        <div class="hover-post text-center">
            <a class="category-link" href="#">Travel</a>
            <h2><a href="single-post.html">{{post.slug}}</a></h2>
            <ul class="post-tags">
                <li>by <a href="#">Stan Enemy</a></li>
                <li>3 days ago</li>
            </ul>
        </div>
    </div>
</div>

【问题讨论】：

您有尝试过的示例代码吗？没有足够的元素来帮助你。
添加帖子，请帮忙。我需要明智的数据类别

标签： javascript html vue.js nuxt.js

【解决方案1】：

如果我正确理解了您的问题，您是否希望使用来自您的 axios 获取请求的响应来填充帖子数组？

如果是这样，那么你可以这样做：

<template>
    <div>
        <p v-if="loading">Loading posts...</p>
        <div v-for="post in posts" :key="post.id">
            <h3>{{ post.title }}</h3>
            <p>{{ post.snippet }}</h3>
        </div>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    data() {
        return {
            posts: [],
            loading: false
        }
    },
    created() {
        this.fetchData()
    }
    methods: {
        fetchData() {
            this.loading = true
            axios
                .get('endpoint')
                .then(res => {
                    this.posts = res.data.posts
                    this.loading = false
                })
                .catch(error => {
                    //handle error
                })
        }
    }
}
</script>

我使用 setTimeout 函数重新创建了它来模拟对 api 的调用。

https://jsfiddle.net/5b9ofqgh/

【讨论】：