Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
671 views
in Technique[技术] by (71.8m points)

Vue 渲染DOM的问题

先贴代码为敬:

  • 错误的示范:
<template>
    <div class="account_binding">
        <div class="crumb_box">
            <h2>素材库</h2>
        </div>
        <ul>
            <li v-for="(item,i) in materialList.item" :key="item.media_id">
                <a v-for="(itemsub,x) in item.content.news_item">
                    {{itemsub.title}}
                </a>
            </li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: 'materialList',
        props: {},
        data() {
            return {
                materialList: {},
            }
        },
        mounted: function () {
            this.getMaterialList();
        },
        methods: {
            getMaterialList(){
                let that=this;
                setTimeout(() => {
                    that.materialList = {
                        item: [
                            {
                            media_id: "sdffdsd",
                            content: {
                                news_item: [
                                {
                                    title: "测试图文素材1",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                {
                                    title: "测试图文素材2",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                {
                                    title: "测试图文素材3",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                ],
                            },
                            update_time: "2020-10-10",
                            },
                        ],
                    };
                });
            }
        },
    }
</script>

  • 正确的示范:
<template>
    <div class="account_binding">
        <div class="crumb_box">
            <h2>素材库</h2>
        </div>
        <ul v-if="materialList.item">
            <li v-for="(item,i) in materialList.item" :key="item.media_id">
                <a v-for="(itemsub,x) in item.content.news_item">
                    {{itemsub.title}}
                </a>
            </li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: 'materialList',
        props: {},
        data() {
            return {
                materialList: {},
            }
        },
        mounted: function () {
            this.getMaterialList();
        },
        methods: {
            getMaterialList(){
                let that=this;
                setTimeout(() => {
                    that.materialList = {
                        item: [
                            {
                            media_id: "sdffdsd",
                            content: {
                                news_item: [
                                {
                                    title: "测试图文素材1",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                {
                                    title: "测试图文素材2",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                {
                                    title: "测试图文素材3",
                                    thumb_media_id: "sfsdfsdsdf",
                                    show_cover_pic: 1,
                                    author: "作者",
                                    digest: "摘要",
                                    content: "文本内容",
                                    url: "http://www.cityre.cn",
                                    content_source_url: "http://www.cityre.cn",
                                },
                                ],
                            },
                            update_time: "2020-10-10",
                            },
                        ],
                    };
                });
            }
        },
    }
</script>

环境是 cdn 引入的 vue2.5.2, 现在遇到的问题是:

ul 元素那里, 如果不加 v-if="materialList.item", 数据更新后(vue开发工具可以看到数据更新了)
并不会更新dom, 请教这是啥原因导致的?

已解决:

原因是 v-if 会触发生命周期的更新。 即:

初始值为 false 组件不会渲染,生命周期钩子不会执行,v-if 的渲染是惰性的。
false => true 依次执行 beforeCreate,created,beforeMount,mounted 钩子。
true => false 依次执行 beforeDestroy,destroyed 钩子。

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

初始的data

 data() {
            return {
                materialList: {},
            }
        },

materialList没有item属性,没有if判断直接for你确定控制台没报错?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...