Javascript – vue v-for-Daten können nicht abgerufen werden
淡淡烟草味
淡淡烟草味 2017-06-12 09:31:04
0
4
778

Die V-for-Schleife kann mit queryselectorall keine Daten abrufen

<p class="content clearfix">
            <ul>
                <li v-for='item in items' :key=item>
                    <p>
                        <img :src="item.picList[0].imgurl"  alt="item.t_name">
                        <p>{{item.title}}</p>
                        <span>{{item.datanum}}张</span>
                    </p>
                </li>
            </ul>
        </p>
created () {
            this.getData();
        },
    methods: {
            getData () {
                let _this = this;
                this.loading = true;
                this.$http.get('web/app/query.do', {
                    params: {
                        'key': '88845608c16c76ef9f4a56b12e3f238be',
                        'pageSize': '10',
                        'a_no': '001',
                        'classify': '01'
                    }
                }).then((res) => {
                    _this.items = res.body.result;
                    _this.waterfull();
                    console.log(_this.items);
                }, (err) => {
                    console.log(err);
                });
            },
            waterfull () {
                var items = document.querySelector('.content');
                var boxes = items.querySelectorAll('li');
                console.log(items);
                // var totalWidth = items.style.width;
                console.log(boxes);
                }

淡淡烟草味
淡淡烟草味

Antworte allen(4)
某草草

了解实例的生命周期,在created阶段,dom还没有被渲染出来

迷茫

楼上说的对,你可以在渲染的时候这样写

_this.waterfull();
setTiomout(function(){
    _this.items = res.body.result;
});

这样应该就可以的,如果不行的话,试着在setTimeout里填个时间,毫秒级的就行

Peter_Zhu

确实是生命周期的问题,但是我比较纳闷的是,既然用了vue,为什么还要通过Dom的方式来取呢?

刘奇

可以使用ref直接绑定dom元素,然后用$refs来操作比较好。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!