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

Question

我正面临着semantic-ui-vue下拉的问题。

这是我的沙盒链接：https://codesandbox.io/s/3qknm52pm5。

在我的沙盒中，我有两个下拉菜单：From和To。

From显示正确的值，To不会因密钥不匹配而导致。

我的App.vue包含这个脚本

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

我用它们的组件是

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

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

有人可以帮我用像toCollection这样的动态密钥传递数据吗？

我在documentation找不到任何相关内容。有人可以帮忙吗？

Answer 1

没有办法为下拉列表定义字段名称

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

demo