Combining JavaScript functions and Vue.js methods through chaining

When working within a Vue component, I have a scenario where I am invoking a function from a separate JavaScript file. The requirement is to then trigger a method within my component once the first function has finished executing:

Here is an example of my .vue component:

import myFunction from '@/components/functions';

export default {
  name: 'test',
  components: {
    myFunction,
  },      
  created(){
    if (....) {      
      myFunction.function1(myParam)          
        .then((response) => {
        this.method2();
       });         
  },  
  methods:{
    method2(){
      something;     
    },
  }
};

And here is the contents of my separate functions.js file:

export default {
  function1(myParam) {
    ...
    return true;
  },
};

Despite trying different approaches, like the one I've included in my code, I keep encountering an error message:

.function1(...).then is not a function

I am confident that the solution is not overly complex, but I am struggling to identify the correct syntax to make it work.

Answer №1

The function in the additional file may either return a Promise or accept a callback from the view component. Furthermore, if you assign this to self/vm and subsequently invoke vm.method2(), it is due to the fact that within the then callback, 'this' is scoped to that function rather than the Vue component.

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

React-virtualized list experiencing performance problems due to react-tether integration within its elements

Description I need help with a challenging issue. I have a long list of items displayed in a react-virtualized VirtualScroll. Each item on the list contains many elements, including one that triggers a context menu. I'm using react-tether to attach t ...

Looking to Share Your Words on Tumblr?

When it comes to interacting with Tumblr, I have no issues using the GET method. However, as soon as I attempt to use the POST method for my Tumblr blog, an error is thrown: ({"meta":{"status":401,"msg":"Not Authorized"},"response":[]}); Below is the cod ...

Display input field in AngularJS when radio button is selected

My JavaScript array looks like this: $scope.quantityMachines = [ { 'snippet' : 'One' }, { 'snippet' : 'Two' }, { 'snippet' : 'Three or more', 'extraField' : true }, { ' ...

Angular: Built-in solution for managing unhandled HTTP errors

I have implemented a default handler for handling http errors in my angularjs app as shown below: myapp.config([ '$httpProvider', function($httpProvider) { $httpProvider.responseInterceptors.push('errorInterceptor') }]) The errorI ...

Using color variables within every component

Searching for a solution to simplify my life. I aim to apply a consistent color scheme to every component in my Nuxt.js application without having to input the colors into each individual component. Recently experimented with SCSS, but struggling to define ...

Can you please explain how to utilize Vue's methods within a navigation guard?

I utilized the tutorial found here: and implemented a new method into the Vue application within the main.js: new Vue({ router, data: {}, methods: {customMethod: ()=> {}}, render: h => h(App), }).$mount('#app'); Afterwards, in my ...

Just beginning my journey with Laravel alongside Vue.js and encountering the error message "Property or method is not defined on the instance but referenced during render."

Upon loading the page, all that can be seen is an empty screen following the brief appearance of {{greeting }}. Still getting acquainted with Vue, I decided to give it a go in laravel, so I put together a basic blade template: <!DOCTYPE html> <htm ...

Running the `npm start` command in Angular tends to be quite time-consuming

When I use Visual Studio Code to run Angular projects, my laptop seems to take a longer time when running the server through npm start compared to others. Could this delay be related to my PC specifications, or is there something I can do to improve it? ...

Place the retrieved data from the API directly into the editor

I've integrated the LineControl Editor into my app and everything is functioning perfectly, except for when I attempt to insert text into the editor. Here's the link to the LineControl GitHub page: https://github.com/suyati/line-control/wiki Fo ...

How to use AJAX script to call a non-static page method in ASP.NET

Is it possible to achieve this task without utilizing the UpdatePanel feature? ...

Issues with Props being undefined when used in a Vue.js component method

I recently started incorporating Vue.js into a Django project that is structured as a multi-page application. My initial task involves creating a basic logout component that will make a POST request to the logout route. The endpoint for this route is obta ...

Is there a way to modify the value of a JavaScript object?

My React componentwillmount fetches data from an ExpressJS API using Axios and receives a JSON response, which is then converted to an object by Axios. [{"client_nick":"PlayTalk","connected_time_record":183710127},{"client_nick":"PlayTalk","connected_time ...

Is it possible to create a single button that, upon clicking, fades in one image while simultaneously fading out another?

My goal is to have the blue square fade in on the first button click, then fade out while the red square fades in on the second click. Unfortunately, it seems that my current code is not achieving this effect. I'm open to any suggestions or help on h ...

It appears that using "object[prop]" as a name attribute does not function properly in HTML

After using console.log on the req.body I received this output: [Object: null prototype] { 'shoe[name]': 'Shoe Name', 'shoe[description]': '', 'shoe[pictures]': '', 'shoe[collections] ...

`Where to include controller.js scripts in an Angular application`

As I dive into learning angular.js with .NET MVC, one major issue that keeps coming up is the fact that many tutorials advise referencing multiple controllers and services in the main (_Layout) page, which can make it quite messy. Although it may seem sim ...

Uncovering the websocket URL with NestJS and conducting postman tests: A step-by-step guide

Creating a mean stack application using NestJS involves utilizing websockets. However, testing websockets in Postman can be confusing. Typically, I test route URLs in Postman and get output like: "http://localhost:3000/{routeUrl}". But when it comes to tes ...

Angular's directives do not trigger the 'viewContentLoaded' event

I recently created a 'light-gallery' directive that relies on the jquery.lightgallery.js plugin to initialize the $.fn.lightGallery() functions. It is crucial for these functions to be executed after the directive template has been compiled and l ...

NextJS - The server attempted to execute the find() function, which is only available on the client side

When attempting to utilize the .find method within the server component, I encounter an error. export async function TransactionList() { const transactions = await fetch('/transactions'); return ( <ul> {transactions.m ...

What is the best method to trigger a form submission using Jquery?

Happy New Year! Wishing you a joyful 2015! I have a basic PHP contact form that I'm validating with Parsley.js. The validation is working well, but I'm receiving a high volume of spam emails. I think that if I make the form submission dependent ...

The PHP script receives an empty string value passed from JavaScript

I am struggling to pass a string from my JavaScript code to my PHP code. Here is the code snippet that triggers when I hit Enter in a text input: $('#user').keypress(function(e) { if(e.which == 13) { var val = $(this).val(); ...