属性或方法 "posts" 未在实例上定义 > 但在渲染期间被引用。确保声明反应数据

Question

我正在尝试用 json 文件中的数据填充 div，我已经检查了我的网络选项卡，它没有初始化请求，这导致了下面的错误，怎么办我解决这个问题？

这是我的 vue 组件和 vue 应用程序

Vue.component('frontpage', {
    template: '#front',

    data: function(){
        return {
            posts: []
        }
    },

    mounted: function(){
        axios.get('front').then(function(posts){
            this.posts = posts;
        }).bind(this);
    }
});

const app = new Vue({
    el: '#frontpage',
});

我的 html 应该从 json

获取数据

    <div class="container">
        <frontpage></frontpage>
    </div>

    <div id="frontpage">
        <template id="front">
            <article v-for="post in posts">
                <h1>@{{ post.title }}</h1>
                <div class="body">@{{ post.post }}</div>
            </article>
        </template>
    </div>

[Vue warn]: Property or method "posts" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance)

Answer 1

与 docs 一样，如果您在组件中使用模板，则必须在模板中提供内联 HTML。鉴于您在 HTML 中定义 frontpage 的 HTML，您必须使用 el 选项来安装模板。您必须进行如下更改：

Vue.component('frontpage', {
    el: '#front',

    data: function(){
        return {
            posts: []
        }
    },

    mounted: function(){
        axios.get('front').then(function(posts){
            this.posts = posts;
        }).bind(this);
    }
});

HTML

<template id="front">
    <article v-for="post in posts">
       <h1>@{{ post.title }}</h1>
       <div class="body">@{{ post.post }}</div>
    </article>
</template>

<div id="frontpage">
  <div class="container">
     <frontpage></frontpage>
  </div>
</div>

属性或方法 "posts" 未在实例上定义 > 但在渲染期间被引用。确保声明反应数据

Property or method "posts" is not defined on the instance > but referenced during render. Make sure to declare reactive data

vuejs2

属性 或方法 "posts" 未在实例上定义 > 但在渲染期间被引用。确保声明反应数据

Property or method "posts" is not defined on the instance > but referenced during render. Make sure to declare reactive data

vuejs2

属性或方法 "posts" 未在实例上定义 > 但在渲染期间被引用。确保声明反应数据