Level 2
Did you look into mixins,
May 6, 2016
5
Level 5
Extend Vue Component with other template and methods
I have a single file Vue Component with style, template and script. I would like to extend it in another .vue file with other template and extend it with new methods.
How can I achieve that?
I imagine something like...
{{ data.abc }}
import Abc from './Abc.vue';
export default Abc.extend({
methods: {
...
}
});
Level 5
I was looking for direct extension of the component, but yes Mixin solves the problem. Tks!
Level 2
I have a similar problem, but looking at the mixin guides didn't really help me. I am using Laravel 5.3 and have brought in the vue-select component and have it working. But I want to be able to have a form that lets me change a property which is the user_id but have the interface be a searchable dropdown as provided by vue-select. The easiest solution would be to have a "user-select" vue widget I create that extends the vue-select functionality so i only have to write the code to fetch my user list, and can add a property to load the correct name based on a server passed user_id once the names load over AJAX.
I am new to all this Vue stuff, so maybe i'm missing something, but it's not clear to me how to create a component that extends another. Any help would be greatly appreciated.
Level 2
For those following along, I think I resolved my own issue by banging my head against this some more... feel free to comment on ugliness, but this was my solution:
UserSelect.vue:
<template>
<vue-select
:options="options"
label="name"
>
</vue-select>
</template>
<script type="text/babel">
import VueSelect from 'vue-select/src/components/Select.vue';
export default {
mixins: ['vue-select'],
props: {
user_id: null
},
data() {
return {
options: null
}
},
methods: {
getOptions(search,loading) {
loading(true);
this.$http.get('/api/users/names').then(resp => {
this.options = resp.data;
loading(false);
});
}
},
ready() {
this.$http.get('/api/users/names').then(resp => {
this.options = resp.data;
});
}
}
</script>
This means I can now just add:
<vue-users user_id='{{ $user_id }}'></vue-users>
My only lingering issue is actually loading up the right name based on the user_id. But that's an issue with how vue-select works.
2 likes
Level 1
You can extend a Vue.js component using the extends option:
import OtherComponent from './OtherComponent.vue'
export default {
extends: OtherComponent
data() {
return {
mergeThisProperty: 'Hello'
}
}
}
This will merge any options, similar to a mixin.
As for the template, it is possible to extend one component's template to another with a bit of trickery.
I use Pug to do this because it offers good template extending capabilities. First, put the template you want to extend into a separate file e.g. BaseComponent.pug. Then in your base component, include it:
<template lang="pug">
include BaseComponent.pug
</template>
In the sub component you can simply extend it:
<template lang="pug">
extends BaseComponent.pug
block content
....
</template>
I've written about this more extensively on my blog if you're interested.
1 like
Please or to participate in this conversation.