Integrating secondary functionality into fullPage and Vue.js

I am encountering an error in VueJS that says

app.js:11754Uncaught TypeError: (intermediate value)(intermediate value).bind is not a function
. I want to trigger the isLoaded function inside fullPage. I have tried using 'this' binding but it's not working. Where should I place the bind(this) to make it work?

        one_page: function () {
        $('#dosbcn').fullpage({
            anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
            afterLoad: function(anchorLink, index){
                //using index
                if(index == 2){
                    console.log('second page here');
                    this.isLoaded(); // Vue function to be called if the index is equal to 2.
                }
            }
        });
    },
    isLoaded: function () {
        console.log('hello world');
    }

Answer №1

When needing to invoke a vue method inside a function, I found it necessary to define this outside of the specific function as shown below:

        singlePage: function () {
        var self = this; // assigning 'this' to 'self'
        $('#dosbcn').fullpage({
            anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
            afterLoad: function(anchorLink, index){
                // using the index
                if(index == 2){
                    self.hasLoaded();
                }
            }
        });
    },
    hasLoaded: function () {
        console.log('indeed indeed')
    }

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

Getting the value of "Page=?" from the href attribute in an HTML tag can be done using Selenium Webdriver and Java

I am looking to extract the value "page = ?" from a specific "href" tag in the HTML code below. I need this value for my Selenium WebDriver script so that my loop can iterate up to page 53. Can someone guide me on how to retrieve the "page =" value mentio ...

Summing up various results from promises [Protractor]

On my webpage, I have set up two input text boxes and a label. My aim is to extract the numbers from these elements, sum up the numbers in the text boxes, and then compare the total with the number in the label. Does anyone know how I can achieve this? He ...

Output the value of each key from an array only if the corresponding key in a second array

There are two arrays at play: $choices = array ( [model] => 3D Modeling / BIM [edb] => Engineering & Design-Build [gse] => Green & Sustainable Energy [ipd] => Integrated Project Design [lc] => ...

Tips for inserting an item into the parent window: Chrome-specific (compatible with all other browsers)

In my HTML file, I have an iFrame element like this: <iframe src="frame.html" width="2000" height="1000"></iframe> When trying to use jQuery's append function from within the iFrame to add a DIV to the parent window, it works fine in Fir ...

Retrieve information from the input field and then, upon clicking the submit button, display the data in the

When a user inputs their name, email, subject, text, and telephone number, I want to send an email with that data. The email will be sent to a specific email address, such as [email protected]. This process is crucial for a hotel website, where the em ...

How can you calculate the ratio of one property value to another in AngularJS?

In my code, I am using ng-repeat to display data values from an object. <div ng-controller="myctrl"> <ul ng-repeat="number in numbers"> <li><span ng-bind="number.first"></span></li> <li><span ng-bind ...

Difficulty commencing a background operation in a node.js application

I have a setup using node.js/express and React for the client side code. This setup allows users to query any number of players by making fetch requests to my express server, which then sends requests to Riot Games public API. The issue I'm encounteri ...

How can the value be passed as an Array to the data in Vue.js?

Passing the object value as props into my "data" studentId within the form is a key aspect of my project. data() { return { form: new Form({ studentId: [] }) }; }, In the method, the initial values for classlists are set to ...

Tips on creating a script for detecting changes in the table element's rows and columns with the specified data values

I have a div-based drop-down with its value stored in TD[data-value]. I am looking to write a script that will trigger when the TD data-value changes. Here is the format of the TD: <td data-value="some-id"> <div class="dropdown">some elements& ...

Calculator built with HTML, CSS, and JavaScript

Hi there, I'm experiencing some issues with my calculator. The buttons seem to be working fine and lining up correctly, but for some reason, nothing is showing up on the monitor or getting calculated when I press the buttons. Here's the code that ...

How does AngularJS watcher behave when a callback is triggered during a reload or router change?

Can anyone explain why the watch callback is triggered upon browser reload or Angular route change even when the old value and new value are the same? Here's an example: $scope.test = "blah"; $scope.watch("test", function(new, old){ console.log(ne ...

Is JavaScript utilizing Non-blocking I/O at the operating system level to enable AJAX functionality?

Given that Javascript operates as a single threaded process and AJAX functions asynchronously, the question arises: How does this happen? Is it possible that at the operating system level, the JS engine is responsible for making non-blocking I/O calls fo ...

React frontend unable to retrieve JSON data from Rails API

I have developed a backend Rails API and confirmed that the endpoint is being accessed by monitoring my server in the terminal. Additionally, I am able to view the response in Postman. However, I am facing an issue where the payload is not returned in my R ...

reasons why my custom attribute directive isn't functioning properly with data binding

Here is a snippet of the code I am working on, with some parts omitted for brevity: template.html ... <tr *ngFor="let item of getProducts(); let i = index" [pa-attr]="getProducts().length < 6 ? 'bg-success' : 'bg-warning'" ...

Attempting to send numerous identifiers in an API request

I encountered a problem while working on a function in Angular that involves pulling data from an API. My goal is to enhance a current segment to accommodate multiple IDs, but I face difficulties when attempting to retrieve more than one ID for the API que ...

You cannot assign a promise to a React state

Calling a function from MoviesPage.tsx to fetch movie data results in a promise containing an object that is successfully fetched (can confirm by console logging). However, I'm facing an issue when trying to assign the result to a state - receiving a ...

The unexpected identifier 'express' was encountered in the import call, which requires either one or two arguments

I'm in the process of constructing an express server using typescript and Bun. Recently, I completed my register route: import express from "express"; const router = express.Router(); router.get('/registerUser',(_req:express.Reque ...

results vary when using both a while loop and callback

I'm having an issue with my while loop when filtering data from mongodb. Even though I should be getting three entries logged to the console, only one entry is making it to the callback function. Can anyone explain why this is happening? while(i--) { ...

Show various attachment file names using jQuery

Utilizing jQuery, I've implemented a script to extract the filename from a hidden field and then append it to the filename class in my HTML. filenameCache = $('#example-marketing-material-file-cache').val().replace(/^.*[\\\/ ...

Performance issues with Datatables server side processing

Utilizing Datatables server-side processing with PHP, JQuery, Ajax, and SQL Server database, I encountered slow performance in features such as pagination and search. Despite working with moderate data, there is a delay of over 40 seconds when using the se ...