Trigger a Vue components method by property
Is it possible to trigger a Vue components method by handling the methods name to one of it's properties?
// main.vue
<navigation :button-left="goback()"></navigation>
// navigation.component.vue
...
props: ["buttonLeft"],
...
methods: {
goback() {
console.log('Run this.');
},
},
...
I tried it like this but it gives me an error:
[Vue warn]: Property or method "goback" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
javascript vue.js vuejs2 vue-component
asked Nov 21 '18 at 22:16
MountainMountain
415614
add a comment |
Is it possible to trigger a Vue components method by handling the methods name to one of it's properties?
// main.vue
<navigation :button-left="goback()"></navigation>
// navigation.component.vue
...
props: ["buttonLeft"],
...
methods: {
goback() {
console.log('Run this.');
},
},
...
I tried it like this but it gives me an error:
[Vue warn]: Property or method "goback" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
javascript vue.js vuejs2 vue-component
asked Nov 21 '18 at 22:16
MountainMountain
415614
what's your use case?
– Boussadjra Brahim
Nov 21 '18 at 22:37
The intention is to handle routing with the navigation. The buttons of the navigation differ from page to page. For some buttons it's necessary to handle a fixed routing path but for others it's just intended to go one step back in the routing history which should be done by a simple method.
– Mountain
Nov 21 '18 at 22:42
What is meant to trigger the method execution?
– Phil
Nov 21 '18 at 22:47
did you try to emit events from child component to the parent component and do what you want in the parent?
– Boussadjra Brahim
Nov 22 '18 at 14:18
add a comment |
Is it possible to trigger a Vue components method by handling the methods name to one of it's properties?
// main.vue
<navigation :button-left="goback()"></navigation>
// navigation.component.vue
...
props: ["buttonLeft"],
...
methods: {
goback() {
console.log('Run this.');
},
},
...
I tried it like this but it gives me an error:
[Vue warn]: Property or method "goback" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
javascript vue.js vuejs2 vue-component
asked Nov 21 '18 at 22:16
MountainMountain
415614
Is it possible to trigger a Vue components method by handling the methods name to one of it's properties?
// main.vue
<navigation :button-left="goback()"></navigation>
// navigation.component.vue
...
props: ["buttonLeft"],
...
methods: {
goback() {
console.log('Run this.');
},
},
...
I tried it like this but it gives me an error:
[Vue warn]: Property or method "goback" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
javascript vue.js vuejs2 vue-component
javascript vue.js vuejs2 vue-component
asked Nov 21 '18 at 22:16
MountainMountain
415614
asked Nov 21 '18 at 22:16
MountainMountain
415614
edited Nov 21 '18 at 22:35
Mountain
asked Nov 21 '18 at 22:16
MountainMountain
415614
asked Nov 21 '18 at 22:16
MountainMountain
415614
asked Nov 21 '18 at 22:16
MountainMountain
415614
415614
what's your use case?
– Boussadjra Brahim
Nov 21 '18 at 22:37
The intention is to handle routing with the navigation. The buttons of the navigation differ from page to page. For some buttons it's necessary to handle a fixed routing path but for others it's just intended to go one step back in the routing history which should be done by a simple method.
– Mountain
Nov 21 '18 at 22:42
What is meant to trigger the method execution?
– Phil
Nov 21 '18 at 22:47
did you try to emit events from child component to the parent component and do what you want in the parent?
– Boussadjra Brahim
Nov 22 '18 at 14:18
add a comment |
what's your use case?
– Boussadjra Brahim
Nov 21 '18 at 22:37
The intention is to handle routing with the navigation. The buttons of the navigation differ from page to page. For some buttons it's necessary to handle a fixed routing path but for others it's just intended to go one step back in the routing history which should be done by a simple method.
– Mountain
Nov 21 '18 at 22:42
What is meant to trigger the method execution?
– Phil
Nov 21 '18 at 22:47
did you try to emit events from child component to the parent component and do what you want in the parent?
– Boussadjra Brahim
Nov 22 '18 at 14:18
what's your use case?
– Boussadjra Brahim
Nov 21 '18 at 22:37
what's your use case?
– Boussadjra Brahim
Nov 21 '18 at 22:37
The intention is to handle routing with the navigation. The buttons of the navigation differ from page to page. For some buttons it's necessary to handle a fixed routing path but for others it's just intended to go one step back in the routing history which should be done by a simple method.
– Mountain
Nov 21 '18 at 22:42
The intention is to handle routing with the navigation. The buttons of the navigation differ from page to page. For some buttons it's necessary to handle a fixed routing path but for others it's just intended to go one step back in the routing history which should be done by a simple method.
– Mountain
Nov 21 '18 at 22:42
What is meant to trigger the method execution?
– Phil
Nov 21 '18 at 22:47
What is meant to trigger the method execution?
– Phil
Nov 21 '18 at 22:47
did you try to emit events from child component to the parent component and do what you want in the parent?
– Boussadjra Brahim
Nov 22 '18 at 14:18
did you try to emit events from child component to the parent component and do what you want in the parent?
– Boussadjra Brahim
Nov 22 '18 at 14:18
add a comment |
1 Answer
1
active
oldest
votes
Yes, this is definitely possible.
The easiest way would be to pass a plain string, eg
<navigation button-left="goback" />
Note there's no v-bind.
Then in your component, you can use the prop value. Something like...
export default {
template: `<button @click="runButtonLeft">Go</button>`,
props: ['buttonLeft'],
methods: {
runButtonLeft () {
if (typeof this[this.buttonLeft] === 'function') {
this[this.buttonLeft]()
} else {
console.error('Invalid method name:', this.buttonLeft)
}
},
goback () {
console.log('Run this.')
}
}
}
You didn't specify what should be used to trigger the method execution so I've gone with a click event.
answered Nov 21 '18 at 22:51
PhilPhil
96.6k11136157
Yes this would work, but I'm struggling to think of a use case for this. If you want different functionality of an event (button left in this case) every time you implement the component, I would probably emit that he event happened, and let the parent component decide what needs to happen. Like<navigation @button-left="call-some-method-on-parent-component" />
– John Halsey
Nov 22 '18 at 13:42
I adopted this way and it fits my need. This is right for me. Thanks a lot.
– Mountain
Nov 24 '18 at 18:37
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421207%2ftrigger-a-vue-components-method-by-property%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Yes, this is definitely possible.
The easiest way would be to pass a plain string, eg
<navigation button-left="goback" />
Note there's no v-bind.
Then in your component, you can use the prop value. Something like...
export default {
template: `<button @click="runButtonLeft">Go</button>`,
props: ['buttonLeft'],
methods: {
runButtonLeft () {
if (typeof this[this.buttonLeft] === 'function') {
this[this.buttonLeft]()
} else {
console.error('Invalid method name:', this.buttonLeft)
}
},
goback () {
console.log('Run this.')
}
}
}
You didn't specify what should be used to trigger the method execution so I've gone with a click event.
answered Nov 21 '18 at 22:51
PhilPhil
96.6k11136157
Yes this would work, but I'm struggling to think of a use case for this. If you want different functionality of an event (button left in this case) every time you implement the component, I would probably emit that he event happened, and let the parent component decide what needs to happen. Like<navigation @button-left="call-some-method-on-parent-component" />
– John Halsey
Nov 22 '18 at 13:42
I adopted this way and it fits my need. This is right for me. Thanks a lot.
– Mountain
Nov 24 '18 at 18:37
add a comment |
Yes, this is definitely possible.
The easiest way would be to pass a plain string, eg
<navigation button-left="goback" />
Note there's no v-bind.
Then in your component, you can use the prop value. Something like...
export default {
template: `<button @click="runButtonLeft">Go</button>`,
props: ['buttonLeft'],
methods: {
runButtonLeft () {
if (typeof this[this.buttonLeft] === 'function') {
this[this.buttonLeft]()
} else {
console.error('Invalid method name:', this.buttonLeft)
}
},
goback () {
console.log('Run this.')
}
}
}
You didn't specify what should be used to trigger the method execution so I've gone with a click event.
answered Nov 21 '18 at 22:51
PhilPhil
96.6k11136157
Yes this would work, but I'm struggling to think of a use case for this. If you want different functionality of an event (button left in this case) every time you implement the component, I would probably emit that he event happened, and let the parent component decide what needs to happen. Like<navigation @button-left="call-some-method-on-parent-component" />
– John Halsey
Nov 22 '18 at 13:42
I adopted this way and it fits my need. This is right for me. Thanks a lot.
– Mountain
Nov 24 '18 at 18:37
add a comment |
Yes, this is definitely possible.
The easiest way would be to pass a plain string, eg
<navigation button-left="goback" />
Note there's no v-bind.
Then in your component, you can use the prop value. Something like...
export default {
template: `<button @click="runButtonLeft">Go</button>`,
props: ['buttonLeft'],
methods: {
runButtonLeft () {
if (typeof this[this.buttonLeft] === 'function') {
this[this.buttonLeft]()
} else {
console.error('Invalid method name:', this.buttonLeft)
}
},
goback () {
console.log('Run this.')
}
}
}
You didn't specify what should be used to trigger the method execution so I've gone with a click event.
answered Nov 21 '18 at 22:51
PhilPhil
96.6k11136157
Yes, this is definitely possible.
The easiest way would be to pass a plain string, eg
<navigation button-left="goback" />
Note there's no v-bind.
Then in your component, you can use the prop value. Something like...
export default {
template: `<button @click="runButtonLeft">Go</button>`,
props: ['buttonLeft'],
methods: {
runButtonLeft () {
if (typeof this[this.buttonLeft] === 'function') {
this[this.buttonLeft]()
} else {
console.error('Invalid method name:', this.buttonLeft)
}
},
goback () {
console.log('Run this.')
}
}
}
You didn't specify what should be used to trigger the method execution so I've gone with a click event.
answered Nov 21 '18 at 22:51
PhilPhil
96.6k11136157
answered Nov 21 '18 at 22:51
PhilPhil
96.6k11136157
answered Nov 21 '18 at 22:51
PhilPhil
96.6k11136157
answered Nov 21 '18 at 22:51
PhilPhil
96.6k11136157
96.6k11136157
Yes this would work, but I'm struggling to think of a use case for this. If you want different functionality of an event (button left in this case) every time you implement the component, I would probably emit that he event happened, and let the parent component decide what needs to happen. Like<navigation @button-left="call-some-method-on-parent-component" />
– John Halsey
Nov 22 '18 at 13:42
I adopted this way and it fits my need. This is right for me. Thanks a lot.
– Mountain
Nov 24 '18 at 18:37
add a comment |
Yes this would work, but I'm struggling to think of a use case for this. If you want different functionality of an event (button left in this case) every time you implement the component, I would probably emit that he event happened, and let the parent component decide what needs to happen. Like<navigation @button-left="call-some-method-on-parent-component" />
– John Halsey
Nov 22 '18 at 13:42
I adopted this way and it fits my need. This is right for me. Thanks a lot.
– Mountain
Nov 24 '18 at 18:37
Yes this would work, but I'm struggling to think of a use case for this. If you want different functionality of an event (button left in this case) every time you implement the component, I would probably emit that he event happened, and let the parent component decide what needs to happen. Like
<navigation @button-left="call-some-method-on-parent-component" />– John Halsey
Nov 22 '18 at 13:42
Yes this would work, but I'm struggling to think of a use case for this. If you want different functionality of an event (button left in this case) every time you implement the component, I would probably emit that he event happened, and let the parent component decide what needs to happen. Like
<navigation @button-left="call-some-method-on-parent-component" />– John Halsey
Nov 22 '18 at 13:42
I adopted this way and it fits my need. This is right for me. Thanks a lot.
– Mountain
Nov 24 '18 at 18:37
I adopted this way and it fits my need. This is right for me. Thanks a lot.
– Mountain
Nov 24 '18 at 18:37
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421207%2ftrigger-a-vue-components-method-by-property%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
what's your use case?
– Boussadjra Brahim
Nov 21 '18 at 22:37
The intention is to handle routing with the navigation. The buttons of the navigation differ from page to page. For some buttons it's necessary to handle a fixed routing path but for others it's just intended to go one step back in the routing history which should be done by a simple method.
– Mountain
Nov 21 '18 at 22:42
What is meant to trigger the method execution?
– Phil
Nov 21 '18 at 22:47
did you try to emit events from child component to the parent component and do what you want in the parent?
– Boussadjra Brahim
Nov 22 '18 at 14:18