从 Vuetify 中的选择输入中显示数组的值

Question

我有一组数据，其中包含一个城市名称和一个归属于该城市的值。当有人选择城市时，它应该显示值。我知道我可以通过{{selected.value}} 获得选择。但是，由于我想提取该值以供以后在计算中使用（即总和例如 30），所以我尝试使用计算值来计算它。我的问题是我似乎无法返回值或数组的一部分。当我有return this.selected 时，我可以看到整个选定的数组，但是当我有return this.selected.value 或return.this.selected.name 时，我什么也得不到。

我对 vuejs 很陌生，所以我不确定我错过了什么。

    <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

尝试从v-select 组件中删除multiple 属性以返回一项：

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

看笔 Vuetify Example Pen by boussadjra (@boussadjra) 在CodePen。

如果您想保留 multiple 属性，则计算属性可能如下：

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