I am working with a dataset containing city names and corresponding values. The goal is to display the value when a city is selected. I know that {{selected.value}} will give me the selected value, but I need to manipulate this value for calculations such as adding 30 to it. To achieve this, I am attempting to use a computed value. However, I am facing an issue where I am unable to return just the value or a specific part of the array. When I use return this.selected, I can see the entire selected array, but when I try return this.selected.value or return.this.selected.name, I do not get any output.
Since I am new to vuejs, I am unsure about what I might be missing in my approach.
<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>