VueJS throws an error indicating that the object cannot be extended

I have encountered an issue while trying to update the promo object by adding a new field called colspan. Unfortunately, I am getting this 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 lend me your expertise in resolving this issue.

Answer №1

The variable promo has been made non-extensible using Object.preventExtensions (or seal or freeze). This means that new properties cannot be added to it. Instead, a new copy of it with additional properties can be created. The easiest way to achieve this is by using Object.assign.

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

This code snippet creates an anonymous object with the property colspan, copies properties from promo into it, and then returns the resulting object as tmpPromo.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using the && operator in an if statement along with checking the length property

Why does the console show 'Cannot read property 'length' of undefined' error message when I merge two if conditions together? //When combining two if statements using &&: for(n= 0, len=i.length; n<len; n++) { if(typeof ...

A step-by-step guide on incorporating box-shadow for the jackColor in the Switchery Plugin

I am looking to add a box shadow to my iOS7 style switches for checkboxes when they are checked. Here is the code I have so far: var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch')); elems.forEach(function (html) { va ...

Mastering NodeJS Promises: Efficiently Handling Multiple http.get Requests

I have recently started learning about NodeJS and Promise functionality, so please be patient with me if this question seems uninformed. My goal is to first retrieve a database of records and then verify that the links associated with these records return ...

jQuery is used to make an object fade out once another object has been moved into place

As I delve into the world of jQuery, I've decided to create a simple Super Mario imitation. The concept is to control Mario using arrow keys and fade out mushrooms once Mario reaches them. However, my attempts at achieving this result have not been su ...

Display the input in the text box before making a selection from the dropdown menu

Latest Technologies: $(document).ready(function(){ $('#userID').change(function(){ $('#username').val($('#userID option:selected').data('username')); }); }); Coding in HTML: <select class="form- ...

Why is it that comparing the childNodes of two identical nodes results in false, while comparing their innerHTML yields true?

Currently, I am in the process of developing a simple function in Node.js that compares two DOMs. My goal is to not only identify any differences between them but also pinpoint the exact variance. Interestingly, upon reconstructing identical DOMs using jsd ...

Transforming Json data into an Object using Angular 6

https://i.stack.imgur.com/JKUpL.png This is the current format of data I am receiving from the server, but I would like it to be in the form of an Object. public getOrder(): Observable < ORDERS > { return this._http.get < ORDERS > (`${thi ...

local individuals and local residents (duplicate) dispatched from the server

Upon analyzing my server's response, I have observed a duplicate of my locals within the locals object. Here is an example: Object { settings: "4.2", env: "development", utils: true, pretty: true, _locals: { settings: ...

Error: The Object #<Object> does not contain a function named 'Schema'

Below is the user model schema that we are using. However, when I try to run it on my localhost, I encounter an error: TypeError: Object # has no method 'Schema' // app/models/user.js // Required modules var neo4j = require('neo4j'); ...

Laravel Inertia Vue: Dealing with session flash message errors

I'm currently immersed in a Laravel Inertia project with a Jetstream starter pack that integrates with vue3. One of the tasks at hand is customizing the login method to check for user status. If a user is inactive, they should receive an error message ...

Is there a way to insert a row into a datatable without needing to perform an Ajax reload or using the

When using row.add(…) on a datatable, I encounter an issue where it refreshes via an ajax call when draw() is activated. This leads to the new row not being visible because the data is reloaded from the database. The UX flow behind this scenario is as f ...

Sort data based on specific criteria and then determine the mean value using Vue.js

I have a firebase table called "products" which includes parameters like product and productivity. My goal is to filter the table by product (which can vary) and calculate the average productivity. So far, I've managed to create a getter function in ...

Implementing component method calls in store.js

In my Login.vue component, I have a method called postData() postData() { this.$store.dispatch('doLogin', fdata) }, The doLogin method is located in store.js actions: { doLogin({ commit }, loginData) { commit('loginStart ...

Tips for ensuring that the cursor is directed to the initial input when using a Vue template form generator

If you're looking for an example, check out the readme of this page: https://github.com/vue-generators/vue-form-generator My goal is to focus the cursor on the first input field in a Vue form generator, specifically the "Name" field. I've atte ...

Preventing the window from resizing while an AJAX query is in progress

I have a script in jQuery that serves as a search tool and also has the capability to resize an element to match the screen height minus 40 pixels whenever the window is resized. However, I am looking for a way to turn off the resizing feature when a searc ...

Guide to making a JavaScript button that triggers an iframe to open upon user clicking the button

I'm currently enhancing the comment section for posts on my website. I am looking to implement a button in javascript that, when clicked, will open an iframe window displaying comments similar to how Facebook does on their post. If there are other lan ...

Learn how to display each element in a list one by one with a three-second interval and animated transitions in React

Let's consider a scenario where we have a component called List: import React, { Component } from 'react'; class List extends Component { constructor() { super(); this.state = { list: [1, 2, 3, 5] } ...

Adjusting data points on a radar chart.js through user interaction

I have a radar map generated using chart.js, along with some input fields where users can enter values that I want to reflect in the graph. I am exploring ways to update the chart dynamically as the user types in the values. One option is to have the char ...

Utilizing a Custom Validator to Compare Two Values in a Dynamic FormArray in Angular 7

Within the "additionalForm" group, there is a formArray named "validations" that dynamically binds values to the validtionsField array. The validtionsField array contains three objects with two values that need to be compared: Min-length and Max-Length. F ...

The performance of Node.js Knex SQL insert queries leaves much to be desired

I have created a simple login system that performs the following actions: Verifies if the username exists (works fine) Adds the username to the database After adding the username, I retrieve the id of the added username. Everything works smoothly on the ...