Override VueJS component methods from another component - javascript

I've tried to override VueJS component method from another component.
Here I want to override checkForm method from another VueJS file.
inside ./src/components/auth_form.vue:
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {...},
methods: {
checkForm: function(e: any) {
console.log('Please override this method!')
}
}
})
</script>
I want to override this method from ./src/views/signup.vue:
<script lang="ts">
import Vue from 'vue'
import authForm from '../components/auth_form.vue'
export default Vue.extend({
name: 'signup',
components: {
authForm
},
data: function() {...},
methods: {
// This does not override the method above!
checkForm: function(e: any) {
console.log("success")
// Reset the form
this.signupForm = {} as SignupForm
}
}
})
</script>

Yes they will not override because the 2 functions are in 2 different scopes. They can have same name and works independently. In order to do what you want, you have to put the checkForm function of auth_form inside its props.
So in auth_form:
props: {
checkForm: {
type: Function,
default(e) {
console.log('Please override this method!')
}
}
}
then when calling it in signup.vue
<auth-form :check-form="checkForm" /> //pass parent's method into children props
methods: {
checkForm() {
console.log("success") // this will override the default one
}
}

Related

How to add multiple components dynamically at run time not globally but locally

Hi i have a situation where i need to register multiple components at run time within a file.
Display.vue
<template>
<div>
<component v-if="currentComponent" :is="currentComponent">
</component>
</div>
</template>
<script>
import Vue from 'vue';
export default {
data(){
return{
currentComponent:null,
}
},
methods:{
load(e){
for(let key in e.components){
Vue.component(key,e.components[key]);
}
this.$nextTick(() =>{
this.currentComponent = e.components.container;
});
},
},
created(){
document.body.addEventListener('component-ready',this.load, false);
},
}
</script>
in my above file how i want my components to be loaded something like shown below:
components:{
container: component Object{},
header: component Object{},
body: component Object {},
footer: component Object {},
}
here is how i'm dispatching event to above file Display.vue
const event = new Event('component-ready');
event.components = {
container: component Object{},
header: component Object{},
body: component Object {},
footer: component Object {},
};
document.body.dispatchEvent(event);
Execution sequence:
event dispatch component-ready
eventlisterner in created of file Display.vue will call load method
Problem: in my current approach components are registered globally, that i want to avoid. i want to register all components to Display.vue file only
To locally register the components on the fly, you can copy the component definitions into this.$options.components:
export default {
methods: {
load(e) {
this.$options.components = e.components 👈
this.$nextTick(() => {
this.currentComponent = e.components.container
})
},
},
}
demo

How to Allow Multiple Exports from a Vue3 Single File Component?

I'm making a Vue3 Single File Component for a custom list. In my single file component, I want to export the main default Vue component, but also the enum declaring what type of list it is:
child:
<template>
<Listbox>
<template #header>
<h5>{{listType}}</h5>
</template>
</Listbox>
</template>
<script lang="ts">
export enum PagesListType {
RecentlyCreated = 'Recently Created',
RecentlyModified = 'Recently Modified',
Starred = 'Starred'
};
export default {
props: {
listType: PagesListType
},
data() {
return {
pages: [],
PagesListType
};
},
};
</script>
The enum only makes sense within the context of this component, so I don't want to put it in some other folder of types. It only relates to the behavior of this list. But when I try to do this in the parent component, it fails:
parent:
<template>
<div>
<PagesList :listType="PagesListType.RecentlyCreated"></PagesList>
<PagesList :listType="PagesListType.RecentlyModified"></PagesList>
<PagesList :listType="PagesListType.Starred"></PagesList>
</div>
</template>
<script lang="ts">
import PagesList, { PagesListType } from './PagesList.vue';
export default {
//parent component details
};
</script>
When I import the named PagesListType enum, it is just undefined. What do I need to do to export the named enum correctly? Thanks!
I opine you need to export enum into a separate file and import it in different files to use it. Where do you put this file depends on you mainly, how you want to structure your project.
For instance, types.ts file in the src folder can define and export the enum like:
export enum PagesListType {
RecentlyCreated = 'Recently Created',
RecentlyModified = 'Recently Modified',
Starred = 'Starred'
}
you can use the enum anywhere by importing it like:
import { PagesListType } from '#/types';
you have to use #/ instead of src/. because of the src folder to # in your TypeScript configuration available in the tsconfig.json file.
I was able to kinda get this to work by not exporting the enum, but adding it as a property to the exported default component:
child:
enum PagesListType {
RecentlyCreated = 'Recently Created',
RecentlyModified = 'Recently Modified',
Starred = 'Starred'
};
export default {
props: {
listType: PagesListType
},
PagesListType,
data() {
return {
pages: [],
PagesListType
};
},
};
parent:
<template>
<div>
<PagesList :listType="created"></PagesList>
<PagesList :listType="modified"></PagesList>
<PagesList :listType="starred"></PagesList>
</div>
</template>
<script lang="ts">
import PagesList from './PagesList.vue';
export default {
computed: {
created() {
return PagesList.PagesListType.RecentlyCreated;
},
modified() {
return PagesList.PagesListType.RecentlyModified;
},
starred() {
return PagesList.PagesListType.Starred;
}
},
//other parent implementation details omitted
};
</script>

How to use tabs on setup composition api

I define tabs as prop, then I want to use in function inside setup() as tabs.value..., but it does not recognize property. It is throwing error:
Cannot find name 'tabs', tabs is not defined
Code:
<script lang="ts">
import {
defineComponent,
ref,
computed,
PropType,
toRefs,
} from '#vue/composition-api'
import i18n from '#/setup/i18n'
export default defineComponent({
name: 'ProgramModal',
props: {
tabs: Array as PropType<Array<any>>,
},
setup() {
const changeTab = (selectedTab: { id: number }) => {
tabs.value.map((t) => {
t.id === selectedTab.id ? (t.current = true) : (t.current = false)
})
}
return {
tabs,
changeTab,
ariaLabel,
}
},
})
</script>
How can I
You need to pass props to setup function:
setup(props) {...

Call function from imported helper class in Vue.js component data

I am trying to call a JavaScript function from an imported helper class in my Vue.js component. I import my helper class in my component and try to use mounted() to call it and pass a paramter to the helper class.
I tried out some solutions from here, but didn't help:
Vue.js: Import class with function and call it in child component
https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266
This is what I tried so far, any ideas?
I have a helper class myHelper.js:
export default myHelper {
myHelperFunction(param) {
return param;
}
}
I have a Vue component MyComponent.vue:
<template>
<v-text-field :rules="[myRule]"></v-text-field>
</template>
<script>
import myHelper from './myHelper.js';
export default {
name: 'MyComponent',
data() {
return {
myCls: new myHelper(),
myRule: this.callHelperFunction,
};
},
components: {
myHelper,
},
mounted() {
this.myCls.myHelperFunction();
},
methods: {
callHelperFunction(param) {
this.myCls.myHelperFunction(param);
}
},
};
</script>
You are not really exporting the class. It is a plain object. To export a class instead of an object do this:
// Notice the use of class keyword
export default class MyHelper {
myHelperFunction(param) {
return param;
}
}
Also, you do not need:
components: {
myHelper,
},
Rest of the code stays the same.

How to access function inside methods of mixin from component lifecycle method in Vue.js

Here is an example :
mixin.js
export default {
methods : {
aFunction() { // Some functionality here }
}
}
component.vue
import mixin from './mixin'
export default {
mixins : [ mixin ]
created() {
// Call aFunction defined in the mixin here
}
}
I want to access the aFunction defined inside methods of mixin from the created() lifecycle method inside the component.
The mixin methods are merged with the current instance of the component, so it would just be:
created(){
this.aFunction()
}
Here is an example.
console.clear()
const mixin = {
methods:{
aFunction(){
console.log("called aFunction")
}
}
}
new Vue({
mixins:[mixin],
created(){
this.aFunction()
}
})
<script src="https://unpkg.com/vue#2.4.2"></script>

Categories