Quasar 框架自动完成不在列表中显示文本

Question

我使用的是最新版本的 quasar (0.17)，我正在尝试使用自动完成组件。我可以过滤列表和 select 一个值，但自动完成列表中的文本没有显示：

定义如下：

<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

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

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>

而且有效！

Quasar 框架自动完成不在列表中显示文本

Quasar framework autocomplete not showing text in list

vue.js

quasar-framework