Question

我遇到semantic-ui-vue下拉菜单的问题。

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

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

From显示正确的值，而To不是由于键不匹配。

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

和我用于两者的组件都是

<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

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

仅使用计算为它重新生成新数组

demo

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

1 个答案: