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?

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.