我确信我只是忽略了显而易见的事情,但是我在这个方面遇到了一些麻烦:具有一个 v-select 控件并将所选值传递给父级的简单组件。我的代码:
//儿童控制
<template>
<v-container fluid grid-list-md>
<v-layout row wrap>
<v-flex d-flex xs12 sm6 md8>
<v-flex xs12 sm6 offset-sm3>
<v-flex xs12 sm6 d-flex>
<v-select :placeholder="placeholder"
:items="options"
item-value="id"
item-text="name"
class="form-control-select"
@input="changeMonth()"
v-model="selectedOption">
</v-select>
</v-flex>
<span>Child component: {{ selectedOption }}</span>
</v-flex>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
name: 'FormSelect',
props: {
placeholder: { type: String },
options: { type: Object }
},
data: function () {
return {
selectedOption: 0
}
},
methods: {
changeMonth: function () {
console.log("child changed: " + this.selectedOption);
this.$emit('change', this.selectedOption);
}
}
}
</script>
//父母
<template>
<div>
<div>
<dropdown2 id="component-dropdown2" :options="months" :placeholder="placeholderValue" v-model="selectedMonth" @change="monthChanged"></dropdown2>
<span>Parent component: {{ selectedMonth}}</span>
</div>
</div>
</template>
<script>
import Dropdown2 from '../addons/Dropdown2';
export default {
components: {
Dropdown2,
},
data() {
return {
placeholderValue: 'Month',
months: [{ id: 1, name: 'Jan' }, { id: 2, name: 'Feb' }, { id: 3, name: 'Mar' },],
selectedMonth: null
}
},
methods: {
monthChanged() {
console.log("Month changed. Selected ID: ", this.selectedMonth);
}
}
}
</script>
我不知道还有什么可以尝试的;有人可以帮助我吗?
提前谢谢了!
N。