Display value of array from select input in Vuetify

Question

I have a set of data which has a city name and a value attributed to the city. When someone selects the city it should show the value. I know that I can get the selection by having {{selected.value}}. However, as I want to extract the value to later use it in a calculation (i.e. sum for example 30 to it), I try to calculate it using a computed value. My problem is that I can't seem to return the value or a part of the array. Whenever I have return this.selected I can see the entire selected array, but when I have return this.selected.value or return.this.selected.name I get nothing.

I'm quite new to vuejs so I'm not sure what am I missing.

    <template>
    <v-container fluid>
        <v-layout wrap align_center>
          <v-flex xs12 sm6>
            <v-select
              v-model="selected"
              :items="items"
              item-text= "city"
              item-value="value"
              :menu-props="{ maxHeight: '400'}"
              label="Select"
              hint="Pick your favorite states"
              multiple
              persistent-hint
              return-object
              single-line
            ></v-select>
          </v-flex>
          <v-flex>
                  {{getselection}}

          </v-flex>
        </v-layout>
        </v-container>

    </template>

    <script>

    export default {

        data () {
          return {
            text:'',
          selected: [],
          newsel: [],
          items:[
    {city: 'NY', value: 32},
    {city: 'Gent', value: 80},
    {city: 'Coimbra', value: 41}
     ]}
        },
  computed:{
    getselection(){
    return this.selected.value
    }
      },
      }
    </script>

@BoussadjraBrahim for now it doesn't really matter. What matters is that what's returned isn't the full array but either just city or just value. — FilipeTeixeira
– FilipeTeixeira, Commented Sep 2, 2019 at 14:12

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Try to remove multiple prop from v-select component in order to return one item:

 <v-flex xs12 sm6>
            <v-select
              v-model="selected"
              :items="items"
              item-text= "city"
              item-value="value"
              :menu-props="{ maxHeight: '400'}"
              label="Select"
              hint="Pick your favorite states"
             
              persistent-hint
              return-object
              single-line
            ></v-select>

See the Pen Vuetify Example Pen by boussadjra (@boussadjra) on CodePen.

If you want to keep multiple prop the computed property could be like :

    getselection(){
    return !!this.selected.length ?this.selected[0].value:0;
    }

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 2, 2019 at 14:14

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

9 Comments

FilipeTeixeira Over a year ago

This works indeed, but how would it work for multiple selections?

Boussadjra Brahim Over a year ago

but that returns multiple cities, you should access array via indexes or use one of its methods in order to make some logic

FilipeTeixeira Over a year ago

I'm sorry but I don't understand your answer. If you remove the multiple prop from the v-select, you can't select then multiple options in the dropdown list.

Boussadjra Brahim Over a year ago

if you keep multiple you should do something like return this.selected[0].value

FilipeTeixeira Over a year ago

That doesn't work. Actually even if you try it on your CodePen, the dropdown list disappears.

|

Collectives™ on Stack Overflow

Display value of array from select input in Vuetify

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related