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

如何解决如何从来自 API 的单个数据创建多个选项，以便在 VueJS 中将其显示为选择/下拉列表

我正在尝试使用 vs-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，然后为其显示不同的选项。

解决方法

为了保存选择，您必须将附加属性映射到每个 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 方法处理。