Hi,
Nice job. In hurry to discover…
Thanks!!
Latest posts made by Salim Larhrib
-
RE: Quasar v2.0.0-beta.1 released! Vue 3, here we come!
-
RE: Quasar v1.15.2 released! Enjoy!
Hi,
A few days ago, I have discovered this wonderful framework. I thank you for crazy energy you deploy everyday.
Regards. -
Q-Select filter an array of objects
Hi everybody,
I have created a Q-Select component which filters array of objects.<template> <q-select class="custom-selection" dense options-dense use-input v-model="innerValue" v-bind="$attrs" v-on="$listeners" :options="stringOptions" filter @filter="HandleFilter" hint="Minimum 3 characters to run filter" ></q-select> </template>
Because of :options is binded to array of objects, I cannot use the quasar example filter. I have tried to do my own but I cannot access to this.$attrs.optionValue. Can somebody tell me how to reach this property or I have to bind it by hand in the props array ???
<script> export default { name: 'SelectFilter', props: ['value', 'options'], data () { return { stringOptions: null } }, computed: { innerValue: { get () { return this.value }, set (value) { this.$emit('input', value) } } }, methods: { HandleFilter (val, update, abort) { if (val.length < 3) { abort() return } update(() => { const needle = val.toLowerCase() this.stringOptions = this.options.filter( v => v[this.$attrs.optionValue].toLowerCase().indexOf(needle) > -1 ) }) } } }
Thank you.
-
RE: qInput component with 2-ways-bind
Hello,
Again another example to simplify 2 ways bindings thanks to computed getter and setter. https://tahazsh.com/vuebyte-computed-setters
Regards. -
RE: qInput component with 2-ways-bind
Hi Dobbel,
Thank you for your links. I will take a look to mixins to extend existing Quasar components.
I have also found a very interesting post which purposes a better solution with computed functions to manage the local v-model innerValue : https://forum.quasar-framework.org/topic/3208/adding-custom-functionality-to-quasar-s-components -
qInput component with 2-ways-bind
Hi all,
I have discovered Quasar 2 days ago and have started to play with. I need to do 2-ways-bind between a vue3 page and an included q-input descendant.
It took time but it works. I need an advice if there is a better solution or my way to do is the right one.
To be short, I have created a local v-model in the component and made a main model update with an emit event.<template> <div> <q-input class="col-md-2" v-model="innerValue" :label="pLabel" :placeholder="pPlaceholder" dense @input="updateValue($event)" /> </div> </template> <script> export default { name: 'BaseInput', props: { modelValue: { type: [String, Number], default: '', required: true }, pLabel: { type: String, required: true }, pPlaceholder: { type: String, default: '' }, pType: { type: String, default: 'text' }, pIcon: { type: String, default: '' } }, data () { return { innerValue: this.modelValue } }, methods: { updateValue () { this.$emit('input', this.innerValue) }, handleChange () { console.log('Change event') } }, model: { // Quasar components waits "value" property when Vue3 sends "modelValue" // though v-model call. // We translate "value" property to "modelValue" type: String, prop: 'modelValue' } }
To use the BaseInput component, I include it in my template like this:
<!-- Field Start Date --> <BaseInput v-model="dName" label="User Name " placeholder="Insert unique user name" /> .... data () { return { dName: 'Tartempion', .....
I am Waiting for your comments and nice advices to improve this 2-ways binding solution.
Thanks to all.