How to display q-select label and value without clicking?

[sninja]

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

[benoitranque]

The problem you are having is, the row[0].data.employee object is not in your list of options. You may have an identical object, but the object must be the same one.
Could you use a string id as the employee value instead? That works for me.

// irrelevant, but I prefer this syntax for getting the backend list
this.employeelist = response.data.map(e => {
  return {
    label: e.firstName + ' ' + e.lastName,
    value: e._id
  }
})

[sninja]

@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?