1

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'
      }]
4

1 に答える 1

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>

そしてそれはうまくいきます！

于 2018-10-17T20:12:21.360 に答える