Search code examples
javascriptvue.jsvuejs2dropdownsemantic-ui

How to pass the data with dynamic key in semantic UI vue dropdown?


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?


Solution

  • there is no way to define field name for dropdown

    only use computed to regenerate new array for it

    demo