CODEWITHSUNDEEP
javascripthtmlformsvue.jsvuejs2
befreeforlife
befreeforlife

Reputation: 511

Several items in label for select form in vue js

I have a select form in Vue.js. In the options, it shows the list of users with fields like name and telephone. Now, I can display only one field in label - telephone in this case. How can I display several fields? For example, the name and the telephone.

<selector placeholder="Выбрать"
  :options="usersList"
  track-by="id"
  label="telephone"
  v-model="user"
  :allow-empty="false"
>
</selector>

Upvotes: 0

Views: 127

Answers (2)

just coding
just coding

Reputation: 193

you can render through the list using v-for looping with your option tag.

Go through

https://alligator.io/vuejs/iterating-v-for/

and https://v2.vuejs.org/v2/guide/list.html (Vuejs documention)

It will help you to better understand the concepts of v-for.

Upvotes: 0

molerat
molerat

Reputation: 994

Just iterate over the <option> tags like so:

<select v-model=...>
  <option v-for="item in items" :value="item.id">
    {{ item.telephone }} and {{ item.other_fields }}
  </option>
</select>

Upvotes: 1

Related Questions