如何从来自 API 的单个数据创建多个选项，以便在 VueJS 中将其显示为 select/dropdown

Question

我正在尝试使用 vs-select 显示 select 下拉列表，选项取自 API。这是我的场景，我已将所有组件动态化，我的首页有 3 张卡片，如果我单击任何一张卡片，就会显示相应的内容。

这是我从 /my-project 端点得到的响应：

    [
          {
            "uid": 1,
            "choice": "project_title1|project_title2|project_title3",
            "age": "35",
            "country": "india"
          },
          {
            "uid": 2,
            "choice": "project_title2",
            "age": "25",
            "country": "australia"
          } 
          ...
    ]

这是我的代码：

        <span v-if="out.choice">
            <template  v-for="(val, e) in Myfilter(out.choice)">
                <vs-select v-model="check" :key="e" :options="[{label: val}]" />
            </template>
        </span>
        <div v-if="out.choice === 'project_title1'">     
           --show contents1--
        </div>
        <div v-if="out.choice === 'project_title2'">
           --show contents2--
        </div>

    check: null,
    out: null
    // ...
    methods: {
      Myfilter (val){
      return val.replaceAll('_', ' ').split('|')
    },
      SelectVue (id) {
          this.$http.get(`/my-project/${id}`)
            .then((res) => {this.out= res.data})
        }
      },
    mounted (){
      this.SelectVue (this.$route.params.uid)
    }

如果用户点击第二张卡片，他将获得 uid=2 的详细信息，即在 vue-select 中，他将获得 project title2 的选项。如果用户点击第一张卡片，他将获得 uid=1 的详细信息，然后显示三个 vue-select，如图所示：

我想要一个 vue-select 和三个不同的选项：

这是我的问题：如何为来自 API 的数据创建一个 vue-select，然后为其显示不同的选项。

Answer 1

为了保存选择，您必须将额外的属性映射到每个 API 条目。我在下面的例子中称它为 selection。我还做了 computed 从条目中提取用户选择。

请注意，我还将每个项目中的 choice 命名为 choices（对我来说更有意义）。

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  data: () => ({
    entries: [{
        "uid": 1,
        "choices": "project_title1|project_title2|project_title3",
        "age": "35",
        "country": "india"
      },
      {
        "uid": 2,
        "choices": "project_title2",
        "age": "25",
        "country": "australia"
      }
    ].map(el => ({...el, selection: null }))
/* Entries need to have a `selection` with a value other than `undefined` before 
 * being passed to Vue's data. Otherwise `.selection` on each won't be reactive
 */
  }),
  computed: {
    selection() {
      return Object.assign({}, ...this.entries.map(e => ({
        [e.country]: e.selection
      })));
    }
  },
  methods: {
    makeSelectOptions(choices) {
      return choices.split('|').map(value => ({
        text: value,
        value
      }))
    }
  }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuesax@3.12.2/dist/vuesax.umd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuesax/dist/vuesax.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.2/iconfont/material-icons.min.css" rel="stylesheet"/>

<div id="app">
  <div v-for="(entry, index) in entries">
    <vs-select :label="entry.country"
               v-model="entry.selection">
      <vs-select-item :key="index"
                      v-bind="item"
                      v-for="(item,index) in makeSelectOptions(entry.choices)" />
    </vs-select>
  </div>
  <pre v-text="selection"></pre>
</div>

将 choices 转换为选择选项由 makeSelectOptions 方法处理。

如何从来自 API 的单个数据创建多个选项，以便在 VueJS 中将其显示为 select/dropdown

How to create a multiple options from a single data coming from the API for displaying it as a select/dropdown in VueJS

filter

vue.js

vue-select