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

  • 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-select filter v-model="form.employee" :options="employeeList"/>
           <q-input v-model="form.jobName" />

    Form is defined like this:

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

    I fill employeeList from backend (database) like this:

    for (var a of {
             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?


  • 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 = => {
      return {
        label: e.firstName + ' ' + e.lastName,
        value: e._id

  • @benoitranque Ok, I did this for select:

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

    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?