Я уверен, что просто упускаю из виду очевидное, но у меня возникла небольшая проблема с этим: простым компонентом с одним элементом управления 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>
Понятия не имею, что еще можно попробовать; кто-нибудь может мне помочь с этим?
Большое спасибо заранее!
Н.