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

in #cn3 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') 的形式),而减少数组长度则没有这个限制

Sort:  

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!