如何在语义UI vue下拉列表中使用动态键传递数据？

Question

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: "abc@gmail.com",
          text: "abc@gmail.com"
        },
        {
          value: "def@gmail.com",
          text: "def@gmail.com"
        },
        {
          value: "qwerty@gmail.com",
          text: "qwerty@gmail.com"
        },
        {
          value: "shubham@gmail.com",
          text: "shubham@gmail.com"
        }
      ],
      toCollection: [
        {
          email: "abc@gmail.com"
        },
        {
          email: "def@gmail.com"
        },
        {
          email: "qwerty@gmail.com"
        },
        {
          email: "shubham@gmail.com"
        }
      ]
    };
  }
};
</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?

Answer 1

there is no way to define field name for dropdown

only use computed to regenerate new array for it

demo