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



  • 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
      }
    })
    


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