呈现错误:TypeError:无法读取laravel vuejs中未定义的属性标题

Question

我遇到了如何在v-for中显示数据的问题。我一直在关注这个链接视频链接时间9:29，但它显示错误无法读取属性。它与拉拉威尔的版本很相似？如果有人能弄清楚那就太好了，非常感谢你！。

模板

<template>
<div>
<h1>The number is : {{views}}</h1>
<button @click="updateCounter(1)">Increase</button>
<button @click="updateCounter(-1)">Increase</button>
<br>
<br><br>
<div v-for ="(user,i) in blogs" :key="i">
<h1>{{user.title}}</h1>
<p>{{user.post}}</p>
</div>
</div>
</template>

编写脚本

<script>
export default {
data(){
return{
views : 0,
blogs : [],
}
},
methods:{
updateCounter(number){
this.views += number;
}
},
created(){
this.views = 100
let posts = [{title: 'this is blog 1', 'post' : 'this is blog post 1', id:1},
{title: 'this is blog 2', 'post' : 'this is blog post 2', id:2},
{title: 'this is blog 3', 'post' : 'this is blog post 3', id:3},
{title: 'this is blog 4', 'post' : 'this is blog post 4', id:4},
,]
this.blogs = posts
}
}
</script>

Answer 1

您的代码很好，只需删除额外的'Comma'

更改,] with ]

Answer 2

在创建的函数上，应该使用

created(){
this.views = 100
let posts = [{title: 'this is blog 1', 'post' : 'this is blog post 1', id:1},
{title: 'this is blog 2', 'post' : 'this is blog post 2', id:2},
{title: 'this is blog 3', 'post' : 'this is blog post 3', id:3},
{title: 'this is blog 4', 'post' : 'this is blog post 4', id:4}
,]
this.blogs = posts
}