I am facing an issue with semantic-ui-vue
dropdown.
Here is my sandbox link: https://codesandbox.io/s/3qknm52pm5.
In my sandbox, I have two dropdowns: From
and To
.
From
shows the correct values and To
doesn't due to key mismatch.
My App.vue
contain this script
<script>
export default {
data() {
return {
from: [],
to: [],
fromCollection: [
{
value: "[email protected]",
text: "[email protected]"
},
{
value: "[email protected]",
text: "[email protected]"
},
{
value: "[email protected]",
text: "[email protected]"
},
{
value: "[email protected]",
text: "[email protected]"
}
],
toCollection: [
{
email: "[email protected]"
},
{
email: "[email protected]"
},
{
email: "[email protected]"
},
{
email: "[email protected]"
}
]
};
}
};
</script>
and the component I used for both of them are
<sui-dropdown
fluid
multiple
:options="fromCollection"
placeholder="from"
selection
v-model="from"
search
:allowAdditions="true"
text="email"
/>
<sui-dropdown
fluid
multiple
:options="toCollection"
placeholder="from"
selection
v-model="to"
search
:allowAdditions="true"
text="email"
/>
The 1st dropdown shows the correct values because I have passed the data from fromCollection
whereas the 2nd dropdown doesn't show any text because I have passed the data from toCollection
which has different key names.
Can someone help me to pass the data with dynamic keys like toCollection
?
I couldn't find anything related in the documentation. Can someone help?
there is no way to define field name for dropdown
only use computed to regenerate new array for it