Hello,

Maybe my question is not really Quasar specific but I did not find any answer till now.

I want to make my own component from Quasar components. For example I have this in my vue file:

<q-select filter filter-placeholder="select" :options="[{label: 'a1', value: 'a1'},{label: 'a2', value: 'a2'},{label: 'a3', value: 'a3'}]" v-model="filtera"/>
<q-select filter filter-placeholder="select" :options="[{label: 'b1', value: 'b1'},{label: 'b2', value: 'b2'},{label: 'b3', value: 'b3'}]" v-model="filterb"/>

As you can see I use two q-select component with different arrays but with the same class definitions (filter and filter-placeholder). I would like to make a new component where these two class style added and I would like to use the new component in my vue like this:

<m-select :options="[{label: 'a1', value: 'a1'},{label: 'a2', value: 'a2'},{label: 'a3', value: 'a3'}]" v-model="filtera"/>
<m-select :options="[{label: 'b1', value: 'b1'},{label: 'b2', value: 'b2'},{label: 'b3', value: 'b3'}]" v-model="filterb"/>

So I would write only the difference.

I tried everything: mixins and extends as well but nothing works. This is my “almost” solution:

<template>
<q-select filter filter-placeholder=“select”/>
</template>

<script>
import {
QSelect
} from ‘quasar’

export default {
name: ‘m-select’,
components: {
QSelect
},
mixins: [QSelect]
}
</script>

But this is not working because I have warnings that I need to use required props “value” and “options”.

What is the solution? Is it possible in Vue.js?

Thanks