Vue.js displays an error: TypeError - "this is undefined" when executing JavaScript

Looking to create a dynamic water pipe with flowing water. Unfortunately, the front picture displays an error message.

https://i.sstatic.net/FyNSK.png

https://i.sstatic.net/BZu47.png

The next image represents a method within the Vue page. Uncertain if it will trigger an error. No issues should arise if this method is not called.

https://i.sstatic.net/thm66.png

Below is the JavaScript file that imports the Vue page

//Constructor

function Createline(config) {

    this.c = 0;

    this.lines = [];

    var self = this;

    //Initialize lines

    (function (self){

        if(config.fx == "w"){

            var number =  config.canvas_w / (config.width + config.width/2 + config.jiange*2);

            number = Math.ceil(number) + 1;

            for(var n = 0 ; n < number ; n++){

                var mxx = config.canvas_w - n*(config.width+config.width/2+config.jiange*2);

                var lines_data = {

                    mx:mxx,

                    lx:mxx - config.width,

                    my:config.my,

                    ly:config.ly,

                    vx:config.vx,

                    vy:config.vy,

                }

                self.lines.push(lines_data);

                var lines_data2 = {

                    mx:mxx-config.width-config.jiange,

                    lx:mxx-config.width-config.jiange-config.width/2,

                    my:config.my,

                    ly:config.ly,

                    vx:config.vx,

                    vy:config.vy,

                }

                self.lines.push(lines_data2);

            }

        }

        if(config.fx == "h"){

            var number =  config.canvas_w / (config.width + config.width/2 + config.jiange*2);

            number = Math.ceil(number) + 1;

            for(var n = 0 ; n < number ; n++){

                var myy = config.canvas_h - n*(config.width+config.width/2+config.jiange*2);

                var lines_data3 = {

                    mx:config.mx,

                    lx:config.lx,

                    my:myy,

                    ly:myy - config.width,

                    vx:config.vx,

                    vy:config.vy,

                }

             ...

export{
    Createline
}

Answer №1

To instantiate a constructor that utilizes this, you must employ the keyword new:

var newObj = new ExampleObject(data);

When a function is invoked using new, it performs the following actions:

function Person(name) {
  // this = {}; (done implicitly)

  // assign properties to this
  this.name = name;
  this.isAdmin = false;

  // return this; (done implicitly)
}

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

What is the best way to uncheck a checkbox once both of my input fields [type=text] have been cleared or are empty

Is there a way to uncheck the checkbox input if both text inputs are empty, and check it if one of the text inputs is filled? $('input[name="t2"],input[name="t3"]').keyup(function() { $('input[name="t1"]').prop("checked", $.trim($( ...

Computed Property Output Remains Static in Template Usage (Vue3 sans Composition API)

I need to retrieve the width of an item in order to pass it as a CSS variable within a computed property. <div class="wrapper"> <fieldset> <legend :style="`--gap:${legendGap}px`"></legend> </fieldset&g ...

Updating a URL for all users using React/Next.js and Firebase: a guide to refreshing the page

I am currently developing a Next.js application with a Firebase backend and have encountered an issue. In my setup, users can create sessions that others can join, but only the creator of the session can "start" it, triggering a state change. I need all us ...

Retrieval of request in iframe URL

Currently, a third party is displaying my URL within their iframe. They are limited in flexibility and simply hard code the URL I provide them with. <iframe url="https://firstURL.com"></iframe> Now, I need to distinguish between two groups of ...

Steps for initializing textures in THREE.JS before use

Before beginning the rendering and animation of objects, I preload and create material textures. However, THREE JS only uploads textures to the GPU when the object is visible in the camera. This causes jerky animation when a new object appears on screen ...

Add a new variable to the data in a jQuery ajax request for each request with any updates

I've encountered an issue with the code below, which is meant to add additional data to any ajax request made by my app. It works fine when the page first loads, but because my application is single-page and ajax-based, I need the updated variable val ...

Problem with selecting odd and even div elements

I have a div populated with a list of rows, and I want to alternate the row colors. To achieve this, I am using the following code: $('#PlatformErrorsTableData').html(table1Html); $('#PlatformErrorsTableData div:nth-child(even)').css(" ...

Find all relevant employee information at once without the need for iteration

I have structured two JSON arrays for employee personal and company details. By inputting a value in the field, I compare both tables and present the corresponding employees' personal and company information in a unified table. <html> ...

Unusual shadow effects with three.js

I'm still new to three.js and webgl, and I'm encountering some odd-looking shadows when using a directional light. Could somebody help me out? Below is the code I have for the renderer: this.renderer.shadowMapEnabled = true; this.renderer.shad ...

Saving JavaScript variables to a JSON file

In my possession is a JSON file named example_json.json, which contains the following data: { "timeline": { "headline":"WELCOME", "type":"default", "text":"People say stuff", "startDate":"10/4/2011 15:02:00", ...

PHP and MySQL combination for efficient removal of multiple dropdown choices

I'm struggling to figure this out. Essentially, it's a form with multiple dropdown menus where users can select one or more items to filter MySQL data results. I want to dynamically update the other dropdown menus as the user makes selections. Fo ...

Will the package versions listed in package-lock.json change if I update the node version and run npm install?

Imagine this scenario: I run `npm install`, then switch the node version, and run `npm install` again. Will the installed packages in `package-lock.json` and `node_modules` change? (This is considering that the packages were not updated on the npm regist ...

"When attempting to pass a string into the res.send() method in Node.js, undefined

As a new Node.js user, I'm attempting to send data back to the browser by utilizing a function called load_blocks() from an external file that I created, and then calling it with res.send(). I currently have two basic files in my setup: The first on ...

Here are the steps to divide an array of objects into separate objects based on their keys

The data I currently have is formatted like this: [{ "Consumer": [{ "Associated ID": "JSUDB2LXXX / BIC 7503 / US", "Parent Consumer": "7503" }], "Owner": [{ &qu ...

Creating an HTML table from JSON data using JavaScript

I recently wrote some code that reads the contents of an XML file and converts it into JSON. The JSON data is then displayed in an HTML table. Everything seems to be working fine, but there's one issue - the first row of the table always shows as "und ...

The navigation bar in React Router is interfering with the loading of other components

Currently, I am in the process of setting up a simple navigation bar that consists of basic buttons without any complex functionality. However, I have encountered an issue where placing the navbar inside the switch prevents other components from loading ...

Determine the number of Fridays that fall between two dates using JavaScript or jQuery

Can you help me calculate the total number of a specific day between two given dates? For instance, if I have a start date and end date stored in a variable, I would like to know how many Fridays fall within that timeframe. ...

Steps to insert an image object into a table

Note: The image in the database is named "profileImage." I want to create a dynamic image object similar to other objects when I insert this code. { label: "Image", name: "profileImage", } It will display the image endpoint as 3704545668418.PNG and ...

Utilizing the `theme` property in makeStyles with Material-UI

I am currently working on passing down an muiTheme to a component through the use of ThemeProvider, and I also want to apply it to the children components. Furthermore, I aim to utilize the theme's properties in both components by creating a classes o ...

Ways to showcase an alert or popup when clicking?

I am utilizing a date picker component from this site and have enabled the 'disablePast' prop to gray out past dates preventing selection. Is there a way to trigger an alert or popup when attempting to click on disabled days (past dates)? Any sug ...