javascript - How to separate the methods of a .vue component in an external .js file? - Stack Overflow

admin管理员组

文章数量:1355564

My ponent was left with many lines of code, so I decided to put the methods in a separate file called functions.js. I can not call those methods.

I tried this:

functions.js

function sendList() {...};
function getLists() {...};
function deleteList(listId) {...}

export default {sendList, getLists, deleteList}

MyLayout.vue

...
<script>
import {sendList, getLists, deleteList} from '../statics/functions.js'
...
created() { this.getLists();},
...

3 errors appear:

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in created hook: "TypeError: this.getLists is not a function"

TypeError: this.getLists is not a function

Property or method "lists" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based ponents, by initializing the property. See: .html#Declaring-Reactive-Properties.

My ponent was left with many lines of code, so I decided to put the methods in a separate file called functions.js. I can not call those methods.

I tried this:

functions.js

function sendList() {...};
function getLists() {...};
function deleteList(listId) {...}

export default {sendList, getLists, deleteList}

MyLayout.vue

...
<script>
import {sendList, getLists, deleteList} from '../statics/functions.js'
...
created() { this.getLists();},
...

3 errors appear:

vue.runtime.esm.js?2b0e:587 [Vue warn]: Error in created hook: "TypeError: this.getLists is not a function"

TypeError: this.getLists is not a function

Property or method "lists" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based ponents, by initializing the property. See: https://v2.vuejs/v2/guide/reactivity.html#Declaring-Reactive-Properties.

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Jul 14, 2022 at 1:41 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Jan 29, 2019 at 21:54 GermanJabloGermanJablo 40155 silver badges1515 bronze badges 2

• 1 getLists(), not this.getLists(). – str Commented Jan 29, 2019 at 21:56
• 1 If you do want them to be methods, you might want to make a mixin – Roy J Commented Jan 29, 2019 at 21:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

I guess 2 things should be fixed:

1. First thing is to make sure to export without default in your functions.js file, like below:

function sendList() {...};
function getLists() {...};
function deleteList(listId) {...}

export { sendList, getLists, deleteList }

...or even more prettier using ES6 syntax:

const sendList = () => {...};
const getLists = () => {...};
const deleteList = (listId) => {...}

export { sendList, getLists, deleteList }

2. Second thing, import them and use without this, like below:

...
<script>
import { sendList, getLists, deleteList } from '../statics/functions.js'
...
created() { getLists() },
...

The other answerer is correct that you need to be using export instead of export default.

If you really need them to be methods on the ponent instance, after importing them, you can add them to the methods like so:

methods: {
  deleteList,
  sendList,
  getLists,
  anotherFunction() {
   ...
  },
}

and then they will be accessible as this.getLists() and so on. It will still be several lines of code (one for each method you're importing), but way fewer than having the method and all the associated logic.

Oh, and as for the third error, the not defined on the instance but referenced during render? That happens when you've got something in the template that hasn't been properly defined in the script part. Did you type lists somewhere you meant to type list?

本文标签： javascriptHow to separate the methods of a vue component in an external js fileStack Overflow