vuetify v-select options from json array of objects

Question

I am trying to populate a vuetify v-select from a rest api json response. Below is the code I have so far. Populating the list using a simple array is no problem but I am having difficutly setting both the value and text properties.

<template>
  <v-container fluid>
    <v-slide-y-transition mode="out-in">
       <v-layout column align-center>
        <v-select v-model="dbSelect" v-on:change="dbConnect()"  :items="dbOptions" single-line></v-select>
       </v-layout>
    </v-slide-y-transition>
  </v-container>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HelloWorld',
  data () {
    return {
      dbSelect: '',
      dbOptions: [],
    }
  },
  mounted () {
    axios.get('http://localhost:5000/api/values')
      .then(r => {
        // var formatted = []
        for (let i = 0; i < r.data.length; i++) {
          this.dbOptions.push(r.data[i])
          // formatted[i] = { value: r.data[i].id, text: r.data[i].name }
        }
      },
      error => {
        console.error(error)
      }
      )
  }
}
</script>

This is the simple Json dataset:

[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"C"},{"id":4,"name":"D"},{"id":5,"name":"E"}]

Currently I am pushing in the whole object because I have been trying to use item-value and item-text but according to documentation I can see that is not right. r.data[i].id and r.data[i].name produce a drop-down list as expected. I want to set dbSelect to the value of the selection on change for a secondary call after selection.

Many thanks all for your help.

Why do you think it's not right to use item-text and item-value? — Bert
– Bert, Commented Mar 26, 2018 at 19:15
Something I read but now can't find in my history but how would I build up dbOptions to make both value and text available. That is the bit that I am struggling with the most. — K7Buoy
– K7Buoy, Commented Mar 26, 2018 at 19:49
Did you look at the link in my above comment? I made an example for you. — Bert
– Bert, Commented Mar 26, 2018 at 19:54
So sorry, I didn't spot it. Perfect, I clearly completely misunderstood what I read or it was completely rubbish. Thank you so much. — K7Buoy
– K7Buoy, Commented Mar 26, 2018 at 20:33

tmarois · Accepted Answer · 2021-02-26 00:26:45Z

6

I had the same issue and felt this needed to be added as the correct answer that solved the issue.

Using the properties of item-text="" and item-value=""

<v-select
  :items="dbOptions"
  v-model="dbSelect"
  item-text="name"
  item-value="id"
></v-select>

The array of objects using name and id

[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"C"},{"id":4,"name":"D"},{"id":5,"name":"E"}]

See Example

This was originally answered by @Bert in the comments.

edited Feb 26, 2021 at 0:26

answered Nov 9, 2019 at 3:48

tmarois

2,4703 gold badges31 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vuetify v-select options from json array of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related