前端
一点也不简单

Vue.js中几种非响应式情况处理

1.数组的下标

解决方案: 使用 Vue.set || this.$set

<div id="app">
      <button @click = "change"> 点击 </button>
      <ul>
        <li v-for = ' (item,index) in list ' :key = 'index'> 
            <p> {{ item }} </p>
        </li>
      </ul>
</div>
new Vue({
  el: '#app',
  data: {
    list: ['a','b','c']
  },
  methods: {
    change () {
      // this.list[0] = 'junge'
      this.$set(this.list,'0','junge')
    }
  }
})

2.数组的length

当我们删除一个数组时,可以使用 arr.length = 0,但是vue不会响应

解决方案: 使用splice(newLength)

new Vue({
      el: '#app',
      data: {
        list: ['a','b','c']
      },
      methods: {
        change () {
          // this.list.length = 0
          this.list.splice(0)
        }
      }
})
赞(0) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » Vue.js中几种非响应式情况处理

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏