这是一个错误：
[Vue 警告]：属性或方法“recipe”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅： https ://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。
<template>
<div class="container recipes">
<div class="row">
<div class="col-md-6" :v-for="recipe in recipes_arr">
<div class="card">
<img src="/img/header-background.jpg" class="card-img-top" alt="Recipe picture">
<div class="card-body">
<h5 class="card-title"> </h5>
<p class="card-text"> </p>
<a href="#" class="btn btn-primary"></a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data: function() {
return {
recipes_arr: [],
}
},
created: function () {
axios
.get('http://localhost:3000/api/showAll')
.then(response => {
this.recipes_arr = response.data;
console.log(response.data); // Works
console.log(this.recipes_arr[0].title); // Works
});
}
}
</script>
