v1 QSelect cant change value with object options

folami

<div class="col-6 q-mb-sm" >
            
            <q-select
              filled
              dense
              options-dense
              options-cover
              v-model="dialog.reg.state"
              ref="state"
              label="Select State"
              :options="ngstates"
              lazy-rules
              :rules="[ v => !!v || 'required']"
              @input="getLga"
            />
          </div>

ngstates = [{name: 'Abuja', stateID: 1}, {name: 'Lagos', stateID: 2}]

v-model value didnt change after first selection

amer1616

of course, will not change the value. cuz :options is used for values inside an array. not for objects inside an array. you need to make computed prop. to iterate over the objects inside ngstates , then pick up name prop from it!!

folami

@amer1616 but docs says u can use objects in array with it
What I want is, If I select Abuja vmodel prop should return the stateID 1 and Lagos… should return stateID 2
Besides,
I need the value for another select option like chained/dependable dropdown select

s.molinari

Or use the option-value prop.

Scott

folami

This post is deleted!

folami

@s-molinari I did but it didn’t change after the first time

s.molinari

Can you explain? Here is a pen using the option-value and option-label props.

https://codepen.io/smolinari/pen/LvpWNx

Scott

folami

This post is deleted!

folami

@s-molinari thanks for your respnse, I got it fixed! I did option-value=“stateID” instead of :option-value=“opt => opt.stateID”
But i will love to know the difference?

s.molinari

That arrow function allows QSelect to “dig” into the objects offered in the options array. If you had, say, names for each of the objects, then you could have used name.object-value. But, with just plain objects in the array, QSelect has to map through them. At least that is my novice explanation of what is going on. You’ll see this pattern often, when components need to dig deeper into objects in an array.

Scott

folami

@s-molinari
But thanks anyway…really appreciate

bruno.ronchetti

Hi everyone.

I have been struggling with the simplest q-select for a couple of hours now, trying to select an object form an Array (I am on v.1-beta 15 - tried both Safari and Chrome.

The example in the docs works in the docs page, but when I put it my project it stops working, although my page contains nothing but the code from the docs. Also, and this is really puzzling, the above codepen by Scott also does not work for me.

Really scratching my head here.

patryckx

my select

method to create custom object array for select

Method for filtering

result

s.molinari

@bruno-ronchetti - Please also upgrade. Beta 15 is awfully old.

Scott

bruno.ronchetti

Thanks everyone. I have upgraded to beta 22 and it works now.

I still need to click twice to get the selection (first click highlights, second selects) - is this the expected behavior?

metalsadman

@bruno-ronchetti no it isn’t, better show your q-select definition imo.

bruno.ronchetti

Thanks for clarifying. I have just checked the browsers:

on OSX Chrome I get the selection on first click - version 74.0.3729.131
on OSX Safari I need to click twice - version 12.1 (14607.1.40.1.4)

My q-select is pretty basic:
<q-select dense bottom-slots stack-label v-model="myDoc.Model" label="Model" :options="modelOptions" class="q-mt-xl" style="max-width: 600px" />

Agung Pratama

This post is deleted!

Agung Pratama

<q-select
class=“q-mr-xs”
outlined
lazy-rules
label=“Provinsi”
option-label=“NAMA”
option-value=“KODE”
@change=“selectChanges”
v-model=“form.provinsi”
:options=“selectOptions”
:rules="[val => !!val || ‘Select your Provinsi’]"
/>

<q-input
class=“q-ml-xs”
outlined
v-model=“form.kabkota”
label=“Kab/Kota”
lazy-rules
/>

can someone help me with this??
i want select bind and change function

No More Posting New Topics!

v1 QSelect cant change value with object options