I have a vue file that has quite a few methods that I am looking to export into a separate file. The problem is some of these methods make use of the this keyword, and I can't figure out how to import these methods properly. Here is a minimal example
App.vue
export default {
...,
data () {
return { // assume these get generated properly through the app
this.orderAmount = null,
this.tax = null,
this.totalAmount = null
}
},
methods: {
assignForAccount () {
this.totalAmount = this.tax * this.totalAmount
}
}
}
I would like to move methods such as assignForAccount to a separate file called methods.js, but it I am getting undefined errors when I try to do this:
App.vue
import { assignForAccount } from './methods.js'
export default {
...,
data () {
return { // assume these get generated properly through the app
this.orderAmount = null,
this.tax = null,
this.totalAmount = null
}
},
methods: {
assignForAccount
}
}
methods.js
export const assignForAccount = (context) => {
context.totalAmount = context.tax * context.orderAmount
}
TIA
You have to pass both this.tax and this.totalAmount from App.vue file into method.js file for the calculations.
method.js :
export function assignForAccount = (tax, totalAmount) => {
return tax * totalAmount
}
App.vue :
import { assignForAccount } from './methods.js'
methods: {
this.totalAmount = assignForAccount(this.tax, this.totalAmount);
}