Nuxt.js |无法读取计算方法返回对象的属性

Question

我使用计算方法来动态分配变量并加载我的页面。我可以显示整个对象。但是我无法显示单个属性。错误信息说：

无法读取未定义的属性“标题”

这就是我的“页面”组件的代码（“_id.vue”）：

> <template>
>     <div class="container">
>       <h1>{{ post }}</h1>
>     </div> </template> <script>   import axios from 'axios';
>     export default {
>         data() {
>           return{
>             id: this.$route.params.id,
>             posts:[]
>           }
>         },
>       computed: {
>           post(){
>             console.log(this.id);
>             return this.posts.find(post => post.id == this.id)
>         }
>       },
>     async created() {
>         await axios.get("https://jsonplaceholder.typicode.com/posts?_limit=3")
>               .then(res => this.posts = res.data)
>               .catch(err => alert(err));
>       }
>     } </script>
> 
> <style scoped>
> 
> </style>

众所周知，我会在页面上显示整个对象。如果我将 h1 标签更改为：

<h1>{{ post.title }}</h1>

显示上述错误信息。 你能帮我解决这个问题吗？

Answer 1

尝试条件渲染：

<h1 v-if="post.title">{{ post.title }}</h1>