vue.js的v-for可以限制循环的次数或遍历的开始和结束位置吗

Posted 2023-04-16

参考技术A for肯定是会遍历到头的，也就是从头遍历到尾，
你可以控制遍历完之后渲染的开始和结束位置，比如
<li v-for="(item,index) in items" v-if="item<=3">item</li>本回答被提问者采纳

Vue.js v-for 循环遍历数组不起作用（非零长度的零元素）

【中文标题】Vue.js v-for 循环遍历数组不起作用（非零长度的零元素）

【英文标题】：Vue.js v-for looping over array not working (zero elements with non-zero length)

【发布时间】：2017-08-14 09:53:09

【问题描述】：

我遇到了一个非常奇怪的问题：我有一个 Vue 组件，它使用 v-for 显示项目列表。尽管数组中有 20 项，但有时列表会为空。我什至打印了数组的长度，它会输出20。

我使用Vue.extend 来定义一个自定义组件。以下是相关部分：

const myComponent = Vue.extend(

    template:'<ul>\
                    <li >Length:  contentRows.length </li>\
                    <li v-for="row in contentRows"> row </li>\
                </ul>\ ',
    data()  
        return  contentRows: [], 
    ,

    created() 
        this.contentRows = this._loadContentRows()
    ,

    methods: 
        _loadContentRows() 
            // Array of arrays, fetched from external source:
            return this.dataSource.contentRows() 
        ,
    
)

上面偶尔会生成以下无效的 HTML 输出（大约 10 个页面加载中的 1 个）：

<ul>
    <li >Length: 20</li>
    <!-- MISSING LIST ITEMS HERE, note how length says 20... -->
</ul>

我的contentRows 数据属性的长度正确显示为20，但循环虽然行返回零项。

我在 renderList(val, render) 第 3294 行 (v2.2.0) 向 vue.js 添加了一些调试语句

 function renderList ( val, render) 
  var ret, i, l, keys, key;
  if (Array.isArray(val) || typeof val === 'string') 
    ret = new Array(val.length);
    console.log('reg length: ' + ret.length + 
               ' val.length = ' + val.length + ' val: ' +
                 val + ' val.length = ' + val.length)
    for (i = 0, l = val.length; i < l; i++) 
      ret[i] = render(val[i], i);
    
    [...]

以上打印：

[Log] reg length: 0 val.length = 0 val: row1,row2,...row20, val.length = 0

注意长度如何为0，但有一个值。这怎么可能？

起初我以为可能是时间问题，val 的值在其他地方发生了更改，但我再次打印了长度、值和长度。奇怪的是，如果我在 renderList 函数的末尾打印 val.length，它会返回正确的值 20。

更新：

我可以用 v2.1.8 和 v2.2.0 重现这个。问题出在第 3199 (v2.1.8) 和 3294 (v2.2.0) 行：for (i = 0, l = val.length; i < l; i++) 。尽管数组中有 20 项，但 val.length 返回 0。

【问题讨论】：

你能在 fiddle/codepen 中复制这个问题吗？

【参考方案1】：

尝试用你的“v-for”添加“key”：

<li v-for="(row, index) in contentRows" :key="'row' + index"> row </li>

见v2.2.0:

当对组件使用 v-for 时，现在需要一个键。升级时您可能会看到一堆“软警告”，但这不会影响您应用的当前行为。

【讨论】：

感谢您的意见。我尝试了密钥，但问题仍然存在。我使用 v2.1.8 和 v2.2.0 对此进行了测试。问题出在第 3199 行（v2.1.8）和第 3294 行（v2.2.0：for (i = 0, l = val.length; i < l; i++) 。尽管数组中有 20 项，但 val.length 返回 0。

为什么使用 "const" : const myComponent = Vue.extend(); ?也许这个 const 阻止了变量的更新。

不，我认为这不是原因。我用 new myComponent() 实例化新组件。它适用于大多数情况，只有十分之一的长度为 0。