导出v-Select值以在另一个组件Vuetify中打印

Question

我在一个组件(RoadType.vue(中有一个v-select列表框，其项目在导出默认情况下列在数据中。

<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"]
};
}, }

现在，在v-select输入框中选择项目后，我希望通过调用一个函数将输出显示在另一个组件的(Summary.vue(v-card文本框中。

<v-card title="Environment"
:subtitle="getPosition"       
</v-card>
getPosition() {
return `GPS R-Positioning: ${this.position}`;
}

但是，如果我调用v-select框的v-model，则不会打印输出。该怎么办？

Answer 1

如果它们在同一页上，您可以发出RoadType.vue 的值

// RoadType.vue
export default {
data() {
return {
gps_items: ['0', '5', '7', '10', '15', 'Random']
};
},
watch: {
position(value) {
this.$emit('position', value)
}
}
};

然后在sample-page.vue上，您可以使用props 将数据传递给Summary.vue

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

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

或者你也可以使用Vuex来简化它。