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

尝试从multiple组件中移除v-select道具，以返回一件物品：

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

参见boussadjra（ Vuetify Example Pen）的钢笔@boussadjra 在CodePen上。

如果您想保留multiple属性，则计算出的属性可能类似于：

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

在Vuetify中显示来自选择输入的数组的值

1 个答案: