I would like q-select to work like this:

# code block
<select v-model="form.theaters">
   <option v-for="theaters in theaterList" v-bind:value="theaters"> {{theaters.name}}</option>
</select>

where theaterList is a response from server like this:

# code block
this.theaterList = response.data

Right now, I’m doing this:

# code block
<q-select v-model="form.theaters" :options="theaterList"/>

where theaterList is a response from server like this:

# code block
this.theaterList = response.data.map(t => {
   return {
     label: t.name,
     value: t
   }
})

On the table row click I want to copy the table row values to form fields with this:

# code block
this.form = Object.assign([], row);

When using plain select it works, but when using q-select it doesn’t. What is the difference and how to achieve the same functionality?

Thanks

@benoitranque Ok, I did this for select:

label: e.firstName + ' ' + e.lastName,
value: e.id

and it works - the employee information does display in select, but, as you said: “the object must be the same”, so in order to work, Employee column in the table now has employee id as value. I want to display first and last name, not id. How to achieve that without losing column sorting and filtering?

Hi,
I really like Quasar, but I can’t get one thing to work. Here is the example. I have two objects - Employees and Jobs, and the input form for Jobs is something like this:

# code block
<q-field>
       <q-select filter v-model="form.employee" :options="employeeList"/>
       <q-input v-model="form.jobName" />
</q-field>

Form is defined like this:

form: { jobName: '', employee: ''},

I fill employeeList from backend (database) like this:

for (var a of response.data) {
    this.employeeList.push({
         label : a.firstName + ' ' + a.lastName, 
         value: a
    });
}

Now, when a user clicks on a row in the table with job and employee columns, I want to fill the job input form with those values. I do it like this:

this.form.jobName = rows[0].data.jobName;
this.form.employee = rows[0].data.employee; 

With this I do set values and I can do something with those values, but visually select is empty - the fisrtName and the lastName do not display.

How can I display the label of select on the form?

Thanks