Vue中增加数组长度获得响应的问题

in cn •  7 years ago 

最近在学习Vue的过程中遇到一个问题,[官方文档](由于 JavaScript 的限制,Vue 不能检测以下变动的数组)说由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

当你修改数组的长度时,例如:vm.items.length = newLength

解决方法是使用

vm.items.splice(newLength)

但我在使用的时候却没有作用。这是我的代码:

 <div id="app">
    <ol>
      <li v-for="(item,index) in items">{{ index }} : {{ item }}</li>
    </ol>
 </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
       items: ['a', 'b', 'c']
      }
    })
  </script

页面运行后,我在chrome的console中输入

app.items.splice(10)

页面没变化,重试几次都没效果,我猜测官方说的解决方法有问题,于是发了issue进行询问。最后得知:

splice() 增加数组的长度必须提供值(可为空,即使用 app.items.splice(3,0,'','','','g','h') 的形式),而减少数组长度则没有这个限制

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Congratulations @syt! You have received a personal award!

1 Year on Steemit
Click on the badge to view your Board of Honor.

Do you like SteemitBoard's project? Then Vote for its witness and get one more award!

Congratulations @syt! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

You can view your badges on your Steem Board and compare to others on the Steem Ranking

Vote for @Steemitboard as a witness to get one more award and increased upvotes!