Export v-Select Values to print in another component - Vuetify - vue.js

Question

I have a v-select list box in one component (RoadsType.vue) and its items are listed in data in export default.
<v-select v-model="position"
:items="gps_items"
:loading="loading"
label="GPS R-Positioning"
:color="color"
></v-select>
export default {
data() {
return {
gps_items: ["0", "5", "7", "10", "15", "Random"]
};
}, }
Now on selecting the item in the v-select input box, I want the output to be shown in another component's (Summary.vue) v-card text box, by calling a function.
<v-card title="Environment"
:subtitle="getPosition"
</v-card>
getPosition() {
return `GPS R-Positioning: ${this.position}`;
}
But the output doesn't print if I call the v-model of the v-select box. What should be done?

Answer 1

If they are on the same page you can emit the value of RoadType.vue
// RoadType.vue
export default {
data() {
return {
gps_items: ['0', '5', '7', '10', '15', 'Random']
};
},
watch: {
position(value) {
this.$emit('position', value)
}
}
};
and then on sample-page.vue you can pass the data to Summary.vue by using props
// sample-page.vue
<template>
<div>
<RoadsType #position="getPosition"/>
<Summary :position="position"/>
</div>
</template>
<script>
export default {
data() {
return {
position: ''
};
},
methods: {
getPosition(position) {
this.position = position
}
},
};
</script>
Add props on Summary.vue
// Summary.vue
<template>
<div>
<v-card title="Environment" :subtitle="getPosition"> </v-card>
</div>
</template>
<script>
export default {
props: {
position: {
type: String,
default: ''
}
},
computed: {
getPosition() {
return `GPS R-Positioning: ${this.position}`;
}
}
};
</script>
or you could also use Vuex aswell to simply it.