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

Question

I am trying to display the select drop down using vs-select, the options are taken from the API. Here is my scenario I have made all my components dynamic, i have 3 cards in my front page, if I click any of the card respective contents are displayed.

Here is the response that I get from the /my-project endpoint:

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

Here is my code:

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

If the user clicks on 2nd card he will get the details of uid=2 i.e in vue-select he will get the option as project title2. If the user clicks on 1st card he will get the details of uid=1 then three vue-select are displayed as shown in image:

Rather i want a single vue-select and three different options in it as:

Here is my question: How do i have a single vue-select for the data coming from API and then display different options for it.

what is `v-select` ? their is `vs-select` in vuesax it that it ? if so then update your code ? — Ashwin Bande, Jan 21 '21 at 09:35
Asking multiple questions in one is *off-topic* on [SO] as it tends to reduce the usefulness of potential answers to users having similar issues. You have to ask each question separately. — tao, Jan 21 '21 at 09:36
Thank you for the info, but all the questions are related, so i dint create different questions. — app_er, Jan 21 '21 at 09:39
Their only relation is being issues in the same project. Capitalizing each word is completely unrelated to iterating properly through different select options. How are they related as programming issues? Bottom line: I informed about this community's rules. You can choose to disregard them. Most likely, if more users agree with me, your question will be closed as *off-topic* through democratic vote. — tao, Jan 21 '21 at 09:42
Using `v-for` as you do will create 3 select elements. Because you use the same `v-model` in each, they will have the same contents and when you change one, you change all of them. If you only want 1 element, don't use a `v-for`. If you want more than one but using different `v-model`s, change the `v-model` based on the current iteration. From what I read you want only 1 element. Explain more about what you want to see in that element. — tao, Jan 21 '21 at 09:49
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227627/discussion-between-app-er-and-tao). — app_er, Jan 21 '21 at 09:50

tao · Accepted Answer · 2021-01-21T11:25:02.200

1

In order to save the selection you have to map an additional property to each of your API entries. I called it selection in the following example. I also made a computed extracting the user selection from entries.

Note I also named choice in each item to choices (makes more sense to me).

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>

Turning choices into selection options is handled by the makeSelectOptions method.

edited Jan 21 '21 at 11:25

answered Jan 21 '21 at 10:50

tao

82,996
16
114
150

@app_er, regarding your recently deleted question, I was writing an answer but now I can't post it. I've made a [fiddle](https://jsfiddle.net/websiter/q86vcnuL/). Hopefully, it will help you. Aside from that, I don't want to discourage you at all, but I really believe you could advance much faster if you took a course on basic JavaScript concepts, such as arrays and iterations, rather than trying to figure them out on your own. Best of luck! – tao Jan 22 '21 at 16:06
Hello @tao, yes i am actually taking a course and sharpening my basics and now i am trying to understand the logical flow of the code, that is where i am actually getting trouble, so i am trying refer lot of examples and working on them. Can you please help me with this one https://stackoverflow.com/questions/65930807/how-to-display-highlight-the-respective-option-with-respect-to-the-route-params – app_er Jan 28 '21 at 03:54
Hello @tao, can you please help me with this one https://stackoverflow.com/questions/65930807/how-to-display-highlight-the-respective-option-with-respect-to-the-route-params – app_er Jan 29 '21 at 11:43
@app_er I can't. I read it multiple times and I don't understand the requirement. I suspect you want the dynamic selectors to be connected to a route parameter but, given the example and your explanation, I don't understand it. Maybe someone else will. – tao Jan 29 '21 at 12:25
Okay no problem, the answer you gave was absolutely fine now i want to display option on loading , when the page loads the vs-select is empty, so i want it to display the respective "choices" of the route on page load. – app_er Jan 29 '21 at 16:34
In that case listen to route and whenever the param you listen to changes, you set the `v-model` used for the select to that value. That's all you have to do. – tao Jan 29 '21 at 17:29
But it is not working that way, i tried it, it works if i specify the value in v-model but every routes does not have that choices . – app_er Jan 29 '21 at 17:53
Of course it doesn't. But you have to guard against it. You have to check if the route contains the right params first. – tao Jan 29 '21 at 18:16

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

1 Answers1