vue v-for循环中取值问题

Question

<div class="content clearfix" :class='{active: isActive}'>
            <ul>
                <li v-for='item in items' :key=item >
                    <div>
                        <img :src="item.picList[0].imgurl" :alt="item.title">//这里picList[0]无法取到值，但在js中可以打印出来
                    </div>
                </li>
            </ul>
        </div>

Answer 1

你的数据应该是请求服务端吧 这个错应该是第一次渲染报的错 第一次数组应该是空的

Answer 2

确定是一个对象。。不是json格式的string？

Answer 3

你的 items 值是通过ajax获取到的吗？如果是的，那么页面刚渲染的时候 items 值应该是个空数组，因此可以添加一个loading标识位在实例 data 中，当ajax请求完成，将这个loading标志位置为false, 然后你的v-for 循环的父级 div 用 v-if 来包裹，如下：

<div class="content clearfix" :class='{active: isActive}'>
    <ul v-if="!loading">
        <li v-for='item in items' :key=item >
            <div>
                <img :src="item.picList[0].imgurl" :alt="item.title">//这里picList[0]无法取到值，但在js中可以打印出来
            </div>
        </li>
    </ul>
</div>

还有个人建议你的 v-for 的 key 尽量不要用循环对象item本身，最好是使用 item 的一个属性值。

Answer 4

要v-if="item.picList"

Answer 5

import sqlImg from 'static/img/db_1_big.png'；
把图片引入就可以了，我刚开始也遇到这个问题了