CODEWITHSUNDEEP
vue.jsvuejs2element-ui
Neelotpal
Neelotpal

Reputation: 347

Element-UI el-select with multiple object values does not display tag

I am using el-select from Element-UI with multiple, filterable and remote search. I have an array of objects as v-model to the element, which has some values already present. On loading the page, the tags do not have any text in them and are not displayed in the select box. I have added value-key which does show the present elements as checked in the dropdown. Not sure whats going wrong, code link: jsfiddle

<el-select 
         v-model="value9"
         multiple 
         value-key="state"
         filterable="" 
         remote="" 
         reserve-keyword 
         placeholder="Please enter a keyword" 
         :remote-method="remoteMethod" 
         :loading="loading">
<el-option 
  v-for="item in options4" 
  :key="item.state" 
  :label="`${item.state} (${item.state})`" 
  :value="item">
</el-option>

Upvotes: 3

Views: 9124

Answers (1)

Yozz
Yozz

Reputation: 485

That is because options4 is empty array. You must specify array contents including options you want to display in the el-select component. If you use state instead, it should work.

<el-option 
  v-for="item in state" 
  :key="item.state" 
  :label="`${item.state} (${item.state})`" 
  :value="item">
</el-option>

Upvotes: 5

Related Questions