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

Posted 2023-02-22

【中文标题】如何在nuxt js中声明条件语句

【英文标题】：How to declare condition statement in 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>

【问题讨论】：

您有尝试过的示例代码吗？没有足够的元素来帮助你。

添加帖子，请帮忙。我需要明智的数据类别

【参考方案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/