Vue.js中的对象不是可扩展错误

Question

I want to update promo object with new field called colspan. But my bad luck that getting

Error:

uncaught (in promise) TypeError: Cannot add property colspan, object is not extensible at eval (eval at ( http://localhost:8080/app.js:3160:1 ), :71:32) at Array.forEach (native) at eval (eval at ( http://localhost:8080/app.js:3160:1 ), :66:35) at Array.forEach (native) at eval (eval at ( http://localhost:8080/app.js:3160:1 ), :64:47) at Array.forEach (native) at eval (eval at ( http://localhost:8080/app.js:3160:1 ), :62:23) at Promise () at F (eval at ( http://localhost:8080/app.js:865:1 ), :35:28) at Object.modifyData (eval at ( http://localhost:8080/app.js:3160:1 ), :48:12)

departmentIds.forEach(departmentId => {
          results[departmentId] = []
          departmentWiseResults[departmentId].forEach((promo, index) => {
            let tmpPromo = promo
            dateRanges.dateRanges.forEach(range => {
              let startedDateWeek = moment(promo.startDate).week()
              let endDateWeek = moment(promo.endDate).week()
              let startedYear = moment(promo.startDate).year()
              let endedYear = moment(promo.endDate).year()
              tmpPromo.colspan = 0
              if (range.startYear === startedYear && range.endYear === endedYear && range.weekNumber <= endDateWeek && range.weekNumber >= startedDateWeek) {
                tmpPromo.colspan++
              }
              departmentWiseResults[departmentId].splice(index, 1, tmpPromo)
              console.log('stareted:', startedDateWeek, endDateWeek, startedYear, endedYear, promo, tmpPromo, departmentWiseResults[departmentId])
            })
            console.log('promo after adding colspna:', promo)
            // if (isInRange(range, promo)) {
            //   console.log('for range', range.startDate, range.endDate)
            //   console.log('for promo', promo.id)
            //   console.log(
            //     'diff is',
            //     findWeekspan(range, dateRanges.dateRanges[dateRanges.dateRanges.length - 1], promo)
            //   )
            // // if (!promo.used) {
            // //   promo.used = true
            // //   results[departmentId]
            // // }
            // }
          })
        })

Please help me how to solve this.

Answer 1

The object promo has had extensibility turned off via Object.preventExtensions (or seal or freeze ). That means you cannot add new properties to it. Instead, you can make a new copy of it with new properties. A convenient way to do this is with Object.assign .

let tmpPromo = Object.assign({colspan: 0}, promo);

This starts with the anonymous object that defines colspan , copies properties from promo into it, and then returns the object (which we assign to tmpPromo ).