Vue not able to call external function on button click

Question

I'm currently learning Vue, Vuetify and other parts of the ecosystem Now I'm trying to call a function defined in a different .js file when clicking a button. It's probably something stupid again, but errors keep being thrown.

Ladder.vue shows the buttons and binds the methods to them. test.js contains an exported function that is called in previewSell

// Ladder.vue
<template>
  <div class="ladder">
    <v-container fluid>
      <v-row align="start" justify="center">
        <v-col align="right" sm="4">
          <v-btn @click="previewBuy" color="#78b63f" width="125"
            >Preview Buy<BR /> Entries</v-btn
          >
        </v-col>
        <v-col align="center" sm="4">
          <v-btn @click="resetForm" color="grey darken-2">reset</v-btn>
        </v-col>
        <v-col align="left" sm="4">
          <v-btn @click="previewSell" color="#ba4967" width="125"
            >Preview Sell<BR /> Entries</v-btn
          >
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import Test from "../components/test";

export default {
  name: "Ladder",
  components: {
  },
  methods: {
    resetForm() {
      this.$refs.form.reset();
    },
    previewBuy() {
      console.log('This works')
    },
    previewSell() {
      console.log(Test())
    },
  },
};

</script>

// test.js

const Test = () => {
  return 'Test'
}
export {Test};

Below the error messages:

Shouldn't it be just an import { Test } from ...? Also, I would recommend moving the file to a more appropriate directory. If I read this import statement, I would assume it to be a Vue component, and be very confused why it is not in components, but instead called in a method. — Sumurai8
– Sumurai8, Commented Jul 15, 2020 at 14:05
Thanks @Sumurai8 should be curly braces indeed. Always these stupid things I keep overlooking. — MPL
– MPL, Commented Jul 15, 2020 at 14:12

Vagan M. · Accepted Answer · 2020-07-15 16:10:36Z

1

If you are exporting some variable without default param, you need to import it with {} for found it in file exports. If you`re using export default someFunc, u can use import without bracers

// test.js

export const Test = () => {
  return 'Test'
}


import {Test} from "../components/test";

or

const Test = () => {
  return 'Test'
}

export default Test

import Test from "../components/test";
// You can change the name of Test to anything else, it will work

edited Jul 15, 2020 at 16:10

answered Jul 15, 2020 at 14:12

Vagan M.

4633 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dbf Over a year ago

Could you elaborate why this is an answer to the question?

Vagan M. Over a year ago

If you are exporting some variable without default param, you need to import it with {} for found it in file exports. If you`re using export default someFunc, u can use import without bracers

dbf Over a year ago

No not as a comment but in your answer of course :)

M K · Accepted Answer · 2020-07-15 14:15:44Z

1

Components { test },

is missing.

and

console.log(this.test())

answered Jul 15, 2020 at 14:15

M K

395 bronze badges

Collectives™ on Stack Overflow

Vue not able to call external function on button click

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related