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>

Answer 1

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