如何为 v-select 组件将值从 child 传递到 parent
How to pass value from child to parent for v-select component
我确定我只是忽略了显而易见的东西,但我在这方面遇到了一点麻烦:带有一个 v-select 控件的简单组件并将选定的值传递给 parent。我的代码:
//CHILD 控制
<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>
//PARENT
<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.
惯例是接受值作为名为 value
的绑定 属性,并作为名为 input
的事件发出所需的新值。
v-model
期望事件被调用 input
,而不是 change
。
代码看起来不错。可能是事件名称冲突。尝试将您的自定义事件名称更改为 @change
以外的名称。 @change
已经是原生vue事件了。
这真的非常简单,我刚刚在
中将 'change' 更改为 'input'
this.$emit('input', this.selectedOption);
而且有效!
非常感谢!!
我确定我只是忽略了显而易见的东西,但我在这方面遇到了一点麻烦:带有一个 v-select 控件的简单组件并将选定的值传递给 parent。我的代码:
//CHILD 控制
<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>
//PARENT
<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.
惯例是接受值作为名为 value
的绑定 属性,并作为名为 input
的事件发出所需的新值。
v-model
期望事件被调用 input
,而不是 change
。
代码看起来不错。可能是事件名称冲突。尝试将您的自定义事件名称更改为 @change
以外的名称。 @change
已经是原生vue事件了。
这真的非常简单,我刚刚在
中将 'change' 更改为 'input'this.$emit('input', this.selectedOption);
而且有效!
非常感谢!!