数组对象排序后的值放在watch监听中时，用得到新的value赋值，报错无线循环

最新推荐文章于 2023-11-01 16:03:24 发布

ws1711073183

最新推荐文章于 2023-11-01 16:03:24 发布

阅读量383

点赞数

分类专栏：日常前端开发小总结文章标签：前端 vue.js

本文链接：https://blog.csdn.net/ws1711073183/article/details/119643677

版权

日常前端开发小总结专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先记一下数组对象排序：

var person = [{name:"Rom",age:12},{name:"Bob",age:22},{name:"Ma",age:5},{name:"Tony",age:25}]
person.sort((a,b)=>{ return a.age-b.age})//升序
person.sort((a,b)=>{ return b.age-a.age})//降序

原来排序直接放在watch里面了this.value.sort((a,b)=>{return a.sort-b.sort})，会报错

watch: {

    value: { 
      // value 需要深度监听及默认先执行handler函数
      handler(val) {
        this.dynamicValidateForm.domains =  this.value.sort((a,b)=>{return a.sort-b.sort}) || [];
      },
      immediate: true,
      deep: true
    }

  },

后来查出来问题，不能放在watch里面，可以放在computed里面，来获得一个新的数组value

valSort(){

      // console.log(this.value)

      if(this.value){

        return this.value.sort((a,b)=>{return a.sort-b.sort})}   

},

然后watch里面赋值新的排序好的数组

watch: {
    value: { 
      // value 需要深度监听及默认先执行handler函数

      handler(val) {
        // console.log(this.value)
        this.dynamicValidateForm.domains =  this.valSort || [];

      },
      immediate: true,
      deep: true
    }

  },