1

我正在尝试使用 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=2ie 在 vue-select 中的详细信息，他将获得选项为project title2. 如果用户点击第一张卡片，他将获得 uid=1 的详细信息，然后显示三个 vue-select，如图所示：

在此处输入图像描述

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

在此处输入图像描述

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

4

1 回答 1

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方法处理。

于 2021-01-21T10:50:51.803 回答