My current challenge involves troubleshooting the semantic-ui-vue dropdown functionality.
To view the issue, visit my sandbox link: https://codesandbox.io/s/3qknm52pm5.
Within the sandbox environment, there are two dropdown menus labeled as From and To.
From correctly displays values while To does not due to a key mismatch.
The script in my App.vue file looks like this:
<script>
export default {
data() {
return {
from: [],
to: [],
fromCollection: [
{
value: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4a49486b4c464a424705484446">[email protected]</a>",
text: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e8898a8ba88f85898184c68b8785">[email protected]</a>"
},
{
value: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e7a7b785e79737f7772307d7173">[email protected]</a>",
text: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e2e3e0c6e1ebe7efeaa8e5e9eb">[email protected]</a>"
},
{
value: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9c8cedccbcdc0f9ded4d8d0d597dad6d4">[email protected]</a>",
text: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfaea8baadaba69fb8b2beb6b3f1bcb0b2">[email protected]</a>"
},
{
value: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9dac1dccbc1c8c4e9cec4c8c0c587cac6c4">[email protected]</a>",
text: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37445f42555f565a77505a565e5b1954585a">[email protected]</a>"
}
],
toCollection: [
{
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5a59587b5c565a525715585456">[email protected]</a>"
},
{
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1074757650777d71797c3e737f7d">[email protected]</a>"
},
{
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82f3f5e7f0f6fbc2e5efe3ebeeace1edef">[email protected]</a>"
},
{
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="43302b36212b222e03242e222a2f6d202c2e">[email protected]</a>"
}
]
};
}
};
</script>
I employed the following component for both dropdowns:
<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 first dropdown correctly displays values because it is fetching data from fromCollection, whereas the second dropdown remains blank since it fetches data from toCollection with different key names.
If anyone has a solution or suggestions on how to pass data with dynamic keys similar to toCollection, please share your thoughts.
I have not found any relevant information in the official documentation. Looking forward to assistance!