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

我面临

语义ui vue

下拉列表的问题

这是我的沙盒链接：

在我的沙盒中，我有两个下拉列表：

From

和

To

From

显示正确的值，

To

不会因为键不匹配而显示

My

App.vue

包含此脚本

<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>

导出默认值{
数据（）{
返回{
发件人：[]，
致：[]，
fromCollection：[
{
值：“abc@gmail.com",
文本：“abc@gmail.com"
},
{
值：“def@gmail.com",
文本：“def@gmail.com"
},
{
值：“qwerty@gmail.com",
文本：“qwerty@gmail.com"
},
{
值：“shubham@gmail.com",
文本：“shubham@gmail.com"
}
],
收集：[
{
电子邮件：“abc@gmail.com"
},
{
电子邮件：“def@gmail.com"
},
{
电子邮件：“qwerty@gmail.com"
},
{
电子邮件：“shubham@gmail.com"
}
]
};
}
};

我在这两个项目中使用的组件是

<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"
    />

第一个下拉列表显示了正确的值，因为我从集合中传递了数据，而第二个下拉列表没有显示任何文本，因为我从集合中传递了具有不同键名的数据

有人能帮我用动态键传递数据吗，比如

到collection

我找不到任何相关的资料。

---

有人能帮忙吗？

无法为下拉列表定义字段名

仅使用computed为其重新生成新数组

---

绝妙的解决方案！