vue.js - Quasar框架自动完成未在列表中显示文本

Question

我正在使用最新版本的 quasar (0.17)，并且正在尝试使用自动完成组件。我能够过滤列表并选择一个值，但自动完成列表中的文本未显示：

这是定义：

<q-field :error="$v.clientInfo.name.$error" error-label="Client name is required">
  <q-input placeholder="Start typing a client's name" float-label="Client Name" type="text" v-model="clientInfo.name" @blur="$v.clientInfo.name.$touch" :before="getIcon('perm_identity')" clearable>

      <q-autocomplete :min-characters="0" :value-field="v => `${ v.name }  (${ v.phone })`" :static-data="{field: 'name', list: clients}" :filter="myFilter" />

  </q-input>
</q-field>

和客户阵列：

clients: [{
        name: 'client 1',
        phone: '0545684562'
      }, {
        name: 'client 2',
        phone: '0556843544'
      }]

Answer 1

所以显然列表中的每个对象都必须包含值/标签，所以我将数据更改为如下所示：

clients: [{
    label: 'client 1',
    value: 'client 1',
    phone: '0545684562'
  }, {
    label: 'client 2',
    value: 'client 2',
    phone: '0556843544'
  }]

和模板：

<q-field :error="$v.clientInfo.name.$error" error-label="Client name is required">
  <q-input placeholder="Start typing a client's name" float-label="Client Name" type="text" v-model="clientInfo.name" @blur="$v.clientInfo.name.$touch" :before="getIcon('perm_identity')" clearable>

      <q-autocomplete :min-characters="0" :value-field="v => `${ v.value}  (${ v.phone })`" :static-data="{field: 'value', list: clients}" :filter="myFilter" />

  </q-input>
</q-field>

它有效！