Function not defined error when calling from another function - javascript

So I am calling a function from inside another function like this:
methods: {
selectStep: function (id) {
...
}
controlStep: function () {
selectStep(1);
...
}
}
but all I get is an error saying:
Uncaught ReferenceError: selectStep is not defined
Do you have any idea about what could be happening here?

Your approach is trying to execute a function from the window object or from whatever context was declared that object methods.
You need to call that function as follow:
this.selecteStep(1);
Further, you need to separate those methods/functions using comma ,
const methods = {
selectStep: function (id) {
console.log('called!', id);
},
controlStep: function () {
this.selectStep(1);
}
}
methods.controlStep();

You have to use this.anotherMethodName
<template>
...
<button #click="callMethod"></button>
...
</template>
<script>
export default {
methods: {
firstMethod() {
console.log('called')
},
callMethod() {
this.firstMethod()
}
}
}
</script>

Related

cant access data return{} varibles in VueJS

function HeaderreRender() {
HeaderRender = false;
this.$nextTick(() => {
HeaderRender = true;
});
};
export default {
name: 'Home',
components: {
HeaderItem,
},
data: function() {
return {
HeaderRender: true,
};
}
}
this is the code now I want to use v-if="HeaderRender" to re-render the headerItem
but when I call function HeaderreRender()
it is replying to me
Uncaught ReferenceError: HeaderRender is not defined
on the function
any suggestions? on why this happens?
Try to place the HeadereRender() function within the methods object of the component and also, it's this.HeaderRender=true
In simple terms, this method does not know about the HeaderRender variable, thus it is not defined in the scope of the function, written that way

Exported function to pass arguments and a constant to another function

I don't really know how to describe this, but I'll try explain it.
I want to be able to call func1() and func2(), but going through handler() in a module.
I want it in a way where calling module.exported1("foo") will call handler(func1, "foo"), in turn calling func1("foo"). The issue I'm having is that if I export 'exported1' as handler(func1), I can't pass any arguments exported1 was called with (As far as I know). Is there a workaround for this?
NOTE: It is a module, and I need it to be exported without the user needing to provide func1 and func2 to handler().
function func1(args) {
...
}
function func2(args) {
...
}
function handler(func, args) {
return func()
}
module.exports = {
exported1 = handler(func1, ...),
exported2 = handler(func2, ...)
}
Not sure I get why to use this pattern, but I am sure there is more to the code and guess you could do the following:
function func1(args) {
console.info(`func1 ${args}`);
}
function func2(args) {
console.info(`func2 ${args}`);
}
function handler(func, args) {
return func(args);
}
module.exports = {
exported1: (args) => {
return handler(func1, (args));
},
exported2: (args) => {
return handler(func2, (args));
},
};
You just need to export the function:
module.exports = {
exported = handler
}
Or, just:
exports.exported = handler
Now, after import, you can call with parameters:
exported(func1,...)
exported(func2,...)
After reading your edited question, I think you want to do something like this but I'm not pretty sure:
function handler(func) {
// you can replace it with function(args) { instead of arrow function
return (args) => {
return func(args)
}
}
module.exports = {
exported1 = handler(func1),
exported2 = handler(func2)
}
exported1(args)

Return function in object not working

I'm trying to return an object with a function inside. When I call it, I get an error:
Uncaught TypeError: config.something is not a function
What am I doing wrong, and how can I fix it?
JSFiddle
function config() {
function something() {
console.log('something');
}
return {
something: something
};
}
config.something();
Description
Since config is a function not an object you need to call/execute it, this then returns the object that you can call .something on.
Code for Function
function config() {
function something() {
console.log('something');
}
return {
something: something
};
}
config().something();
Code for Object
var config = {
something: function() {
console.log('something');
}
};
config.something();
More resources:
https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e#.eqdstb1l6
Object vs Class vs Function
https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e#.eqdstb1l6
https://www.google.com/search?q=javascript+functions+vs+objects&oq=javascript+functions+vs+&aqs=chrome.0.0j69i57j0l4.4688j1j7&sourceid=chrome&ie=UTF-8

How to call vue instance outside it in Javascript

How can I call the test vue in javascript? Here is my code, I want to call test when I do something in javascript function.
function clickit() {
this.test.fetchTestData();
}
var test = new Vue({
el: '#viewport',
data: {
test_data: []
},
mounted: function () {
this.fetchTestData();
},
methods: {
fetchTestData: function () {
$.get(test.json, function (data) {
this.test_data = data;
alert(this.test_data.isActive);
});
}
}
});
You are attempting to use this inside clickit() where this refers to window, so you just need to remove this and it should call the method inside the view model:
function clickit() {
test.fetchTestData();
}
If you compile this code with 'vue-cli-service build' the variable 'test' will not be defined, but you can make it visible to javascript in the mounted function:
new Vue({
el: '#viewport',
data: {
test_data: []
},
mounted: function () {
window.test=this;
},
methods: {
fetchTestData: function () {
$.get(test.json, function (data) {
this.test_data = data;
alert(this.test_data.isActive);
});
}
}
});
Then you can call it from javascript:
function clickit() {
window.test.fetchTestData();
}
Another way to call VueJs method using external java-script.
Firstly we should create a file. name event.js
import Vue from 'vue';
export default new Vue({
data: {
}
});
After that we should import that event.js to our component
import Event from "../event.js";
Then we can emit an event on our javascript function like below
function yourJavascriptFunction(){
Event.$emit("fetchdata");
}
In your component, mounted property should be like below:
mounted() {
Event.$on("fetchdata", group => {
this.fetchData();
});
},
methods() {
async fetchData() {
console.log('hoooray :)');
}
},

convert existing javascript file for requirejs

I had a javascript file like below..
First, I have some functions defined, and call the function on some event (document.ready here)
function foo(arg) {
return arg;
}
function bar(arg) {
return arg;
}
$(document).ready(function(){
doSomething();
});
Now I am trying to use requirejs and having trouble figuring out how to modify this file for it.
You can try this approach:
define(['dep'], function (dep) { //If you have any dependency
function foo(arg) {
return arg;
}
function bar(arg) {
return arg;
}
return {
myMethods: {
bar: bar(arg),
foo: foo(arg)
}
};
});
You shouldn't include document.ready here. Instead use that where you are going to use this module as a dependency.
This module will return myMethods object containing your methods.
Let's say you would have two files, main.js, which contains the initial call to require, and code.js, which contains the code. What you can do is this:
in main.js
$(function () {
require([
"/Url_To_Code.JS_Here"
], function (
code) {
code.doSomething();
});
});
in code.js:
define(
[],
function () {
var foo = function () {
};
var doSomething = function () {
};
return {
doSomething : doSomething
};
}
);
so whatever you export from code.js (what is returned), you can access in main.js

Categories