Vue component encounters issue with exporting JavaScript functions

I decided to streamline my code by moving some functions into a JavaScript file like this:

[...]
function changeToEditView(reportId)
{
    let pathEdit="/edit/"+reportId;
    this.$router.push({ path: pathEdit, replace: true });
}
[...]
export {convertDate, deleteReport, changeToEditView, getPdfByReportId}

However, when I import these functions into my Vue component like this

import axios from 'axios'
import convertDate from '@/js/methods' 
import deleteReport from '@/js/methods'
import changeToEditView from '@/js/methods'
import getPdfByReportId from '@/js/methods'
export default 
{
[...]
methods:
    {
        convertDate,
        deleteReport,
        changeToEditView,
        getPdfByReportId,

I encounter the following warning messages:

 warning  in ./src/views/DashboardView.vue?vue&type=script&lang=js

export 'default' (imported as 'deleteReport') was not found in '@/js/methods' (possible exports: changeToEditView, convertDate, deleteReport, getPdfByReportId)

 warning  in ./src/views/DashboardView.vue?vue&type=script&lang=js

export 'default' (imported as 'changeToEditView') was not found in '@/js/methods' (possible exports: changeToEditView, convertDate, deleteReport, getPdfByReportId)

 warning  in ./src/views/DashboardView.vue?vue&type=script&lang=js

export 'default' (imported as 'getPdfByReportId') was not found in '@/js/methods' (possible exports: changeToEditView, convertDate, deleteReport, getPdfByReportId)

I attempted adding 'default' after export in the JavaScript file like this but none of the functions seem to work

export default {convertDate, deleteReport, changeToEditView, getPdfByReportId}

Answer №1

There are a few issues that need to be addressed in your code.

Firstly, make sure to update your script so that it exports named functions. Here's an example:

export const changeToEditView = (reportId) => {
  let pathEdit="/edit/"+reportId;
  this.$router.push({ path: pathEdit, replace: true });
};

export const deleteReport = () => {
/*  */
};

Then, import these functions using the following syntax:

import { changeToEditView, deleteReport } from '@/src/path-to-file';

You can now use these methods within your Vue component without needing to register them or prepend with this..

For instance:

methods: {
  doStuff() {
    deleteReport();
    changeToEditView();
  },
},

This resource provides more information on the difference between named exports and default exports.

Another issue is that accessing this.$router directly may not work as expected. You should instead import your Vue router instance to utilize the .push method.

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

I have created an Express.js application. Whenever I visit a page, I consistently need to refresh in order for the variables to appear correctly

Hello, I'm seeking some assistance. Despite my efforts in searching for a solution, I have not been successful in finding one. I've developed an application using Express.js that includes a basic form in jade. The intention is to display "Yes" i ...

Send two arguments to a personalized validation function using express-validation

I have a requirement to input two values in order to search for a subdocument using the main document ID and then another ID of the subdocument. These IDs are received as parameters, and I am utilizing express-validator with a custom function to ensure th ...

Creating interactive Vue components using sync and event handling

In my Vue.js 2.3 project, I am dynamically rendering a list of components using <component v-for="..."> tags. The structure of my template is as follows: <some-component v-for="{name, props}, index in modules" :key="index"> <component ...

Utilize two separate functions within the onchange event of a v-checkbox component in a Vue.js application

I am currently using Vue.js with Vuetify and Laravel. In one of my components, I have a dynamic datatable that fetches data from the database using axios. Within this datatable, there are v-checkboxes. Everything is functioning as expected, but now I want ...

Discover the secret to displaying buttons only when the mouse cursor hovers over a Vuetify data table

I am currently learning Vue.js with Vuetify and using the v-data-table component to display table data. I have a question about functionality - is there a way to show buttons within the table when a user hovers over it with their mouse? Also, if I select ...

How can I verify an element's attribute while employing Event Delegation?

Is there a method to determine if a particular element has been activated using Event Delegation, based on its attribute, class, or ID? <ul> <li><button>Make the first paragraph appear</button></li> <li><butto ...

Encountered an issue with md-autocomplete: Attempting to read property 'success' of an undefined element

I encountered an issue while using Material Angular framework and md-autocomplete. The error message I receive is: Cannot read property 'success' of undefined. Below is the snippet of my code: /*My app.js*/ var app = angular.module('app&apo ...

How can we ensure the discord client object is easily accessible within event files?

I'm a beginner with Discord.js and I've been trying to figure out how to allow event and command files to access the main client instance. I want to be able to call client.database in an event file for CRUD operations, but I'm confused on ho ...

Manipulating variables across various methods in TypeScript

I have a simple code snippet where two variables are defined in the Main method and I need to access them from another method. However, I am encountering an issue with 'variables are not defined', even though I specified them in the declerations ...

Incorporate a variable into a CSS class

Currently, I am working on developing a component that creates an animation loop with a duration that is passed as a prop to the component. The issue I am facing involves using CSS to create the animation: animate:{ -webkit-transition: 10.0s !important ...

Is there any more Angular code to be bound using ng-bind-html or ng-bind?

Hey there! Just a quick Angular inquiry: <div class="_minimal_size margin_10_middle"> <div class="_50 espaciado_0_20"> <p ng-bind-html="eirana_knows.feedback"></p> </div> <br class="clear"/> </div ...

Using AJAX (jQuery) to process and refine JSON data through filtration

I need assistance with filtering a JSON array using AJAX but I'm unsure of how to proceed. { posts: [{ "image": "images/bbtv.jpg", "group": "a" }, { "image": "images/grow.jpg", "group": "b" }, { "image": "images/tabs.jpg", ...

Guide to dynamically assigning the id attribute of an HTML element using angularjs (1.x)

Given an HTML element that is a div, what is the method to assign a value to its id attribute? The value should be a combination of a scope variable and a string. ...

Storing props in JSX components using variables in React.jsLearn how to set props in JSX components and

If I have already created a component: class Co extends React.Component { render = () => { const name = this.props.name; return ( <p>Hello, my name is {name}</p> ) } } and stored it in a variable ...

Content is not appearing within the component when using a router-link

I'm encountering some troubles with the router-link functionality in my project. Here is a breakdown of what I have: Routes.js: import Homepage from './components/homepage/Homepage' import About from './components/About' export ...

Singling out a particular navigation tab

When attempting to link specific table IDs so that the corresponding tab is active when opened (i.e. www.gohome.com/html#profile), I am facing an issue where the active tab remains unchanged. Even after specifically calling out tab IDs, there seems to be n ...

Methods for adding a new object to an array in Angular: Explained

How can I insert a new object in Angular? Here is the current data: data = [ { title: 'Book1' }, { title: 'Book2' }, { title: 'Book3' }, { title: 'Book4' } ] I would like to update the obje ...

Is there a way to transform an angular 2 app.module into ES6 format?

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; //specific imports remov ...

Consistently Incorrect Date Formatting in Bootstrap Display

I have a potential issue with my date display. It should show a default "Start Date" in a short date format, but when the "Sale Date" DropDownBoxFor is toggled, it should display an AJAX result date. However, the display always appears in a date and time f ...

NextJS encountered a JavaScript heap out of memory issue

While developing my NextJs project, it suddenly encountered an unknown issue that resulted in the following error message being logged: <--- Last few GCs ---> [8728:000001A567CE5290] 8719226 ms: Mark-sweep (reduce) 1827.7 (1944.2) -> 1827.7 (189 ...