Issue with Argument Validation in Internet Explorer 11 while using Vue.js

Encountering an error in IE11 while the code works fine in Chrome, Mozilla, and Safari. The issue arises when trying to remove a car from the garage.

The error message "Invalid Argument" pops up once I attempt to remove a car from the garage section within my project.

I suspect that the problem lies with the swiper slider implementation. When I eliminate the swiper component from the section, the removal process works smoothly. Refer to this screenshot for more clarity: http://prntscr.com/onfklt

Here is the Remove function code snippet:

remove(id) {

    let vm = this;
    vm.to = vm.to-1;
    vm.total = vm.total-1;
    var resultModel=vm.$global.inArrayModel(id,vm.carModel);
    vm.model.garageDataArray=vm.$global.remove_grage(id,vm.model.garageDataArray,this);
    vm.carModel.splice(resultModel,1);
},

Global variable function for removing cars from the garage:

inArrayModel(id, carModel) {
  var length = carModel.length;
  for (var i = 0; i < length; i++) {
    if (carModel[i].model_id == id)
      return i;
    }
    return false;
},


remove_grage(id, garageData, snotifyObj) {
    var result = this.inArray(id, garageData);
    if (result != 'false') {
      garageData.splice(result, 1);
      localStorage.setItem("garage", JSON.stringify(garageData));
      this.onerror(snotifyObj.$snotify, snotifyObj.$store, 'Removed from Garage');
    }
    return garageData;
},

Experiencing issues with the following code snippet:

[Vue warn]: Error in nextTick: "Error: Invalid argument."
"Error: Invalid argument.
    at setTextContent (eval code:5718:3)
   at patchVnode (eval code:6317:7)
   at updateChildren (eval code:6178:9)
   at patchVnode (eval code:6304:29)
   at updateChildren (eval code:6178:9)
   at patchVnode (eval code:6304:29)
   at updateChildren (eval code:6178:9)
   at patchVnode (eval code:6304:29)
   at updateChildren (eval code:6178:9)
   at patchVnode (eval code:6304:29)"

Answer №1

Here is a potential solution to the issue at hand:

https://forum.vuejs.org/t/fixing-memory-leaks-in-internet-explorer-with-vue-js/28559

"After encountering a similar problem, I realized that properly clearing out the children of an element before replacing its innerHTML was crucial. Vue's functionality may not entirely account for Internet Explorer's deficiencies in handling data binding pointers, so it's essential to remove the existing children first."

Answer №2

The issue I encountered involved the innerHtml of an element being modified by non-Vue code, resulting in the "Invalid argument." error in IE11. To work around this problem, I suggest setting the innerHtml text using either the :text-content.prop="yourText" attribute or v-text="yourText" attribute on that specific element.

Looking forward to the end of life for IE11 on June 15, 2022!

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

Guide on retrieving the value property of an element with querySelector

I am new to JavaScript and have been working on some practice projects to improve my skills. What is the best way to retrieve the value property of an element using its ID? I have tried the following code, which seems to be working: var billAmount = doc ...

Achieving inline behavior for two divs using React

// Custom JavaScript code const hookFunction = () => { const {useState, useEffect} = React; const Slider = props => { const { innerWidth: width, innerHeight: height } = window; const urls = [ "https://www.imb. ...

Tips for creating list and detail pages using content retrieved from an API

I've encountered an issue with my nuxt project. When I try to route the page using nuxt-link, the component is not rendering on my page. I suspect that it's not making a fetch call. However, when I use a normal a href link, everything works per ...

Implementing password validation using ng-pattern allows for a more secure and

How can I validate a password using ng-pattern? The regular expression I'm using in my model works fine, but it only displays an error message if the password is shorter than 7 characters. It doesn't show an error if the password is also in the w ...

Verify if there are any duplicate values in the dropdown menu

I am currently working on a code that adds items to a select list, and it is functioning properly. However, I am facing a challenge in comparing values to prevent duplicates. I know how to compare values, but I am struggling with checking for values that h ...

Generating a tag filter using elements from a collection of profiles

I have an array of profiles containing various skills. Each profile has its own set of tags to describe their skills. For example: profiles = [ { name: "John", skills: ["react", "javascript"]}, { name: "Jane", skil ...

Three.js is not a representation of an object within the THREE.Object3D framework

Can you assist me with this issue? Below is the pertinent information: c9: or (http://) zixxus-github-io-zixxus.c9.io/ and git: https://github.com/zixxus/zixxus.github.io.git Myconsole: "THREE.WebGLRenderer" "69" three.js:17679 "THREE.WebGLRenderer: ...

I am encountering an issue where the jQuery load() function is not successfully loading my Django view within

After setting up my HTML, I wanted to include my Django view in the "radio2" div. To achieve this, I utilized the JQuery function Load(). However, I encountered an issue where it kept returning a 404 error with the get request "http://127.0.0.1:8000/post/a ...

I'm having trouble installing puppeteer

I tried running the command npm i --save-dev puppeteer to set up puppeteer for e2e testing. Unfortunately, an error occurred during installation: C:\Users\Mora\Desktop\JS\Testing>npm i --save-dev puppeteer > <a href="/cd ...

What are the implications of creating a .Net class within JavaScript code using the Jint engine?

One of the unique features in Jint is the ability to access .Net classes in JS. JS File Code : var write = function (msg) { var log = System.Console.WriteLine; log(msg); }; C# Code Engine jsEngine = new Engine(e=>e.AllowClr()); string scr ...

Adjust the orientation of a Three.js-generated 3D "Cube" to create a new view

I've managed to create a 3D wire-frame cube using Three.js examples, but I'm looking to adjust the cube's angle. Currently, it appears like this: However, I want it to resemble this: Take a look at my code: HTML <script src="http://w ...

What is the best way to avoid adding duplicate HTML content to Bootstrap modal divs using jQuery?

In my project, I wanted to create a functionality where clicking on an image would trigger a modal box to pop up with additional content added once. However, I encountered two issues that I'm currently facing. Firstly, the header text that I intended ...

Do not include the "dist" folder when exporting sub-modules in TypeScript

I've developed a basic module called modA: modA/ - package.json - dist/ - index.js - db.js - stuff.js My goal is to use the submodules "db" and "stuff" like this: import * as db from modA/db -- how can I achieve this? My package.json has main: ...

Adjust the datepick plugin to display a calendar pop-up when an icon is selected

I have implemented a jQuery calendar plugin called datepick on my website. I have connected the datepicker to my input field using the following code: $('.dobOnly').datepick(); You can see a working example here: jsFiddle Currently, the calen ...

How to create a dropdown menu in React js with an array of items

Can we structure the array without splitting it into two parts and iterating over them? arrayList=[Jeans, Jackets, Pants, Fragrance, Sunglasses, Health Products] <div className='Flexbox'> //arrayList1.map](//arrayList1.map)(x=>return(< ...

Guide on waiting for an asynchronous function in the constructor in JavaScript

In the process of creating a JS class, I encounter a situation where I need to call wasmFunc in the constructor and store its output in this.val. However, since wasmFunc comes from a WebAssembly file, it is necessary to execute an async function called loa ...

The breakdown of an object literal in JavaScript

What is the reason that we cannot access the second item in the object literal the same way as the first? var foo = {a:"alpha",2:"beta"}; console.log(foo.a) -> printing 'alpha' correctly console.log(foo.2) -> Error: missing ) after argumen ...

Converting an HTML form with empty values into JSON using JavaScript and formatting it

While searching for an answer to my question, I noticed that similar questions have been asked before but none provided the solution I need. My situation involves a basic form with a submit button. <form id="myForm" class="vertically-centered"> ...

Issue with rendering the search component due to a conflict with validate.js

I am currently facing an issue with my search component that includes validation using JavaScript. The problem I am encountering is that when I first focus on the input, the validation and request do not work. However, after losing focus on the input, cli ...

I am in search of a way to utilize JavaScript in order to transform a "flat" JSON object into a nested JSON tree that allows for a one-to-many matching capability

I'm on a mission to transform a flat JSON object into a nested tree using JavaScript. The unique challenge I'm facing is the need to match one child node to multiple parent nodes, a scenario I haven't found in existing solutions. Behold, my ...