Javascript 如何显示新添加的数据？

我想问一下，为什么新添加的数据没有显示在模板中，但它使用

console.log

显示了新添加的数据（请参见ViewPost.vue）

这是我添加新帖子后的结果：。有人知道如何做到这一点

---

这是我的父组件：

<template>
    <section>
        //more codes here
        <ViewPost v-for="data in postData" :key="data.post_id" :data="data" />
    </section>
</template>

<script>
import { mapState } from 'vuex';
export default {
    components: {ViewPost},
    computed: {
        ...mapState({
            postData: state => state.post.datas,
        }),
    }
    //more codes here
};
</script>

//这里有更多代码
从“vuex”导入{mapState}；
导出默认值{
组件：{ViewPost}，
计算：{
…地图状态({
postData:state=>state.post.datas，
}),
}
//这里有更多代码
};

下面是ViewPost.vue的

<template>
    <span>
        <div class="card mb-10">
            <h1>body</h1> 
            {{ data.post_body }}
        </div>
    </span>
</template>

<script>
export default {
    props: {
        data: {},
    },
    
    created() {
        console.log(this.data);
    },
};

<template>
    <span>
        <div class="card mb-10">
            <h1>body</h1> 
            {{ data.post_body || data.body }}
        </div>
    </span>
</template>

<script>
export default {
    props: ['data']
    
    created() {
        console.log(this.data);
    },
};

身体
{{data.post_body}
导出默认值{
道具：{
数据：{}，
},
创建（）{
console.log（this.data）；
},
};

索引

作为一个键可以很好地工作

<template>
    <section>
        //more codes here
        <ViewPost v-for="(data,index) in postData" :key="index" :data="data" />
    </section>
</template>

<script>
import { mapState } from 'vuex';
export default {
    components: {ViewPost},
    computed: {
        ...mapState({
            postData: state => state.post.datas,
        }),
    }
    //more codes here
};
</script>

//这里有更多代码
从“vuex”导入{mapState}；
导出默认值{
组件：{ViewPost}，
计算：{
…地图状态({
postData:state=>state.post.datas，
}),
}
//这里有更多代码
};

ViewPost.vue

<template>
    <span>
        <div class="card mb-10">
            <h1>body</h1> 
            {{ data.post_body }}
        </div>
    </span>
</template>

<script>
export default {
    props: {
        data: {},
    },
    
    created() {
        console.log(this.data);
    },
};

<template>
    <span>
        <div class="card mb-10">
            <h1>body</h1> 
            {{ data.post_body || data.body }}
        </div>
    </span>
</template>

<script>
export default {
    props: ['data']
    
    created() {
        console.log(this.data);
    },
};

身体
{{data.post_body | | data.body}
导出默认值{
道具：[“数据”]
创建（）{
console.log（this.data）；
},
};

您还可以共享您的console.log输出吗？尝试将

v-for

移动到

ViewPost.vue

，它必须响应整个控制台的更改array@omerS这是@Mik我不会那么做的先生，我的ViewPost仅用于单篇文章查看，因此它会出现在控制台日志中，但不在模板中，对吗？我刚刚测试了先生，但一切都一样，它没有在模板中呈现，但

道具

有它自己的功能。查看vuejs devtools结果和bdw Sir我使用的是

unshift

，我没有使用

push

，这会有什么不同吗？先生。我现在明白了问题所在，新添加的数据返回的数据与我的获取数据不同。见鬼，非常感谢您抽出时间，先生。事实上，新添加的数据会出现问题。您不会将新数据对象构建为以前的数据。您可以更改参数名称。假设已加载的数据具有属性名“post_body”。但是，当您插入新的时，您只需将属性名设置为“body”。这就出现了问题