Multiple file Vue js setup — [Vue warn]: Error in v-on handler: “TypeError: formSubmitMessage is not a function”

Question

I'm using javascript. I used Vue and traditional html to write a reactive single page app, and I want to port it over to vue cli. I have several js files. One has a function in it that I want to call using Vue single file components. One of the js files is called 'controls.js'. One is called 'v.js'. The v.js file has a vue instance. I want to run a function in control.js from the v.js file.

//error msg
[Vue warn]: Error in v-on handler: "TypeError: formSubmitMessage is not a function"

found in

---> <Message> at src/components/Message.vue
       <Appx> at src/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917
vue.runtime.esm.js?2b0e:1888 

TypeError: formSubmitMessage is not a function
    at Vue.useFormSubmitMessage (v.js?e9d2:118)
    at VueComponent.useFormSubmitMessage (App.vue?234e:202)
    at click (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"9216e95a-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Message.vue?vue&type=template&id=61d2d687& (app.js:1082), <anonymous>:33:42)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

// v.js
import Vue from "vue";
import appx from "../App.vue";

require("./populate.js");
const   {formSubmitMessage, preview_image_msg} = require ('./populate.js');

export function doLoad() {

  let visibility = new Vue({
    el: '#app',
    render: h => h(appx),
    data() {
      return {
        login: false,
        register: false,
        newsfeed: false,
        home: true,
        banner: true,
        form_message: false,
        form_exercise: false,
        form_workout: false
      };
    },
    mounted() {
      console.log("mounted");
    
    },
    methods: {
      classOption: function (i) {
        
        const x = Boolean(i);
        if (x === true) return 'visi';
        else return 'invis';
      },
      // this is only part of list of functions.
      useFormSubmitMessage: function () { 
        formSubmitMessage();  //<<-- this does not work.
        
      }


    }
  });

}

//main.js
import Vue from "vue";

import './../node_modules/bulma/css/bulma.css';
import "./../node_modules/@fortawesome/fontawesome-free/js/all.js"
import '@/assets/bulma.css';


require("./js/v.js");

import { doLoad } from "./js/v.js";

doLoad();

//App.vue
<template>
  <div id="appx">
     <message
      :newsfeed="newsfeed"
      :banner="banner"
      :login="login"
      :register="register"
      :home="home"
      :form_message="form_message"
      :form_exercise="form_exercise" 
      :form_workout="form_workout"
      :focusRegister="focusRegister"
      :focusNews="focusNews"
      :focusReset="focusReset"
      :focusLogin="focusLogin"
      :focusFormMessage="focusFormMessage"
      :useFormSubmitMessage="useFormSubmitMessage"

    ></message>
  </div>
</template>

<script>
import "./../node_modules/bulma/css/bulma.css";
import "@/assets/bulma.css";

import bannercomponent from "./components/Banner.vue";
import feedcontainer from "./components/FeedContainer.vue";
import register from "./components/Register.vue";
import home from "./components/Home.vue";
import login from "./components/Login.vue";
import message from "./components/Message.vue";

import { visibility, newsfeed, banner } from "./js/v.js";
const   {formSubmitMessage} = require ('./js/populate.js');


export default {
  name: "appx",
  data() {
    return {

      login: this.$root.login,
      register: this.$root.register,
      home: this.$root.home,
      form_message: this.$root.form_message,
      form_exercise: this.$root.form_exercise,
      form_workout: this.$root.form_workout,
      newsfeed: this.$root.newsfeed,
      banner: this.$root.banner,
    };
  },
  components: {
    bannercomponent: bannercomponent,
    feedcontainer: feedcontainer,
    register: register,
    home: home,
    login: login,
    message: message
  },

  mounted() {
    console.log("appx");
    
  },
  methods: {
    classOption: function (i) {

      const x = Boolean(i);
      if (x === true) return "visi";
      else return "invis";
    },
    copyVals: function() {
      this.login = this.$root.login;
      this.register = this.$root.register;
      this.home = this.$root.home;
      this.form_message = this.$root.form_message;
      this.form_exercise = this.$root.form_exercise;
      this.form_workout = this.$root.form_workout;
      this.newsfeed = this.$root.newsfeed;
      this.banner = this.$root.banner;
    },
    
    useFormSubmitMessage: function () {
      this.$root.useFormSubmitMessage();
      this.copyVals();
    }
  },
}; 

</script>

// controls.js
import Vue from "vue";

require("./v.js");

import { subtreeStr, setMessage, insertFeed, setExercise } from './populate.js';
import { focusNews } from "./v.js";


export function formSubmitMessage() {
  console.log("here 1");
  
  //do some things here that are not listed.
}

//Message.vue
<template>
  
    <!-- start inputform for message -- some listing has been removed -->
    
    <button class="button is-primary" @click="useFormSubmitMessage();">Submit</button>

                    
   <input class="file-input is-primary" type="file" name="resume" id="pic-button" ref="picButton" @change="preview_image_msg($event)" multiple>
                        
</template>

<script>

export default {
  name: "message",
  data: () => ({
    
  }),
  props: {
    newsfeed: Boolean,
    focusFormMessage: Function,
    form_message: Boolean,
    useFormSubmitMessage: Function,

  },
  
};
</script>

I don't know the proper way to include a function from another file.

Answer 1

It looks like formSubmitMessage is defined as a named export in controls.js , so use a named import for it:

import { formSubmitMessage } from './controls.js'

You are mixing the use of require and import to load modules but it's preferred to stick with one, probably imports, with Vue CLI.