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.
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.