Say, we have a Vue.js component built this way:
export default {
watch: {
// vars
}
},
methods: {
functionOne: function() {
function nestedFuncOne(p, q) {
// doing something
}
},
functionTwo: function() {
function nestedFuncTwo(r, s) {
// doing something
}
nestedFuncOne(param1, param2); // how to call it?
}
},
(...)
How should an inner function from the first method be called from inside of second method? this seems not to give desired output here.
Related
The documentation says this is possible but there's no example showing how. How would one go about it?
The setup() method is like an add-on to a regular component so we can just include it along with data, methods, etc.
function useSomething() {
// ...
}
const Component = {
setup() {
const { out1, out2 } = useSomething();
return { out1, out2 };
},
data: function () {
// ...
},
methods: {
// ...
},
}
Is it possible or recommended to add a custom property to a component like in the below example? In that case how can I call this property from a method?
export default {
data() {
return {
test = ""
};
},
methods: {
someMethod() {
//
},
},
customLoggingData {
title : "main",
}
};
I have seen some plugins that have their own property like the customLoggingData and I was just curious to know if that was possible.
If not I'll just have it as a method.
The recommendation from the vuejs team is this:
{
data: ...,
created: function () {
this.customLoggingData = {
...
}
}
}
See this github thread for more info.
Per documentation here
If page A pushes page B, it can send a function as a prop or data that modifies page A’s context. This way, whenever we want to send anything to page A from page B, the latter just needs to call the function and pass some arguments:
// Page A
this.$emit('push-page', {
extends: pageB,
onsNavigatorProps: {
passDataBack(data) {
this.dataFromPageB = data;
}
}
});
I am following this idea. Doing something similar with this.$store.commit
I want to push AddItemPage and get the returned value copied to this.items
//Parent.vue
pushAddItemPage() {
this.$store.commit('navigator/push', {
extends: AddItemPage,
data() {
return {
toolbarInfo: {
backLabel: this.$t('Page'),
title: this.$t('Add Item')
}
}
},
onsNavigatorProps: {
passDataBack(data) {
this.items = data.splice() //***this*** is undefined here
}
}
})
},
//AddItemPage.vue
...
submitChanges()
{
this.$attrs.passDataBack(this, ['abc', 'xyz']) // passDataBack() is called, no issues.
},
...
Only problem is this is not available inside callback function.
So i can't do this.items = data.splice()
current context is available with arrow operator.
Correct version:
onsNavigatorProps: {
passDataBack: (data) => {
this.items = data.splice()
}
}
I am trying to use checked values of HTML checkboxes in another component like below but I am not getting any output.
computed: {
formated () {
EventBus.$on('change', function (checkedSkills) {
console.log(checkedSkills)
});
}
},
Thanks
UPDATE
Now I am trying to do like below
data() {
return {
values: [],
}
},
computed: {
formated () {
console.log(this.values)
}
},
created () {
EventBus.$on('change', function (skillName) {
this.values = skillName
});
},
I think you are misunderstanding what the computed object is for. computed is so that you can create what are essentially variables using other bits of data or logic.
Your new computed value formated (BTW, it's "formatted" with two t's) is actually a method, not a variable.
You should simply change computed to methods if you want to log something to the console.
Here is a section in the Vue docs about the differences between computed and methods: https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods
So instead of what you have now:
computed: {
formated () {
console.log(this.values)
}
},
You should simply have:
methods: {
formated () {
console.log(this.values)
}
},
data: function () {
return {
questions: []
}
},
watch: {
questions : function(val, oldVal) {
foo()
}
},
methods: {
foo() {
console.log("foo called");
}
}
Produce error: ReferenceError: foo is not defined
Also I am looking at examples: http://vuejs-ru.github.io/vuejs.org/api/options.html#watch
What this string do?
handler: function (val, oldVal) { /* ... */ },
handler it's keyword? Or it can be function?
If you want to use watch to observe your property, you could call your method it with this.foo:
data: function () {
return {
questions: []
}
},
watch: {
questions: {
handler: function(val, oldVal) {
this.foo(); // call it in the context of your component object
},
deep: true
}
},
methods: {
foo() {
console.log("foo called");
}
}
To answer your question about handler: It is a keyword property that can take either a function expression (as in the example) or a reference to a function, such as:
function myHandler() { ... } // Defined somewhere outside of the vue component object
...
handler: myHandler,
...
Just out of curiosity: Do you need to watch a property in order to do something every time it changes or could computed properties solve your problem as well?
Just to add to the answer from #nils
handler: 'foo'
also works if the function foo is within methods.
Bit shorter than
handler() {
this.foo()
}