VueJs +ElementUi Change方法没有事件数据
VueJs +ElementUi Change method has no event data
对 Vue 和 Element 相当陌生 UI。
我正在尝试使用 ElementUI autocomplete/select 组件制作自定义组件。
我的问题是@change 方法没有 event.target.value 值。
我得到一个
Error in v-on handler: "TypeError: Cannot read property 'value' of
undefined"
错误。
下面是我的 Vue 组件代码。
我从另一个组件将其称为 <account-search v-model="newAccountForm.parent"></account-search>
。
v-on:change.native="handleChange"
似乎根本不起作用。
<template>
<div>
<el-select :value="value" placeholder="Select" @change="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "accountSearch",
props: {
value: {
type: String
}
},
data(){
return {
options:[
{
value: 1,
label: "hello"
},
{
value : 2,
label : "ola"
}
],
loading: false,
}
},
mounted() {
},
methods: {
handleChange: function (event) {
console.log(event.target.value);
// this.$emit('input', value);
},
}
}
</script>
<style scoped>
</style>
非常感谢任何帮助。
您在 handleChange
中获得的参数是 value
而不是 event
<template>
<div>
<el-select :value="value" placeholder="Select" @input="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "accountSearch",
props: {
value: {
type: String
}
},
data(){
return {
options:[
{
value: 1,
label: "hello"
},
{
value : 2,
label : "ola"
}
],
loading: false,
}
},
mounted() {
},
methods: {
handleChange: function (value) {
console.log(value);
this.$emit('input', value);
},
}
}
</script>
<style scoped>
</style>
对 Vue 和 Element 相当陌生 UI。 我正在尝试使用 ElementUI autocomplete/select 组件制作自定义组件。
我的问题是@change 方法没有 event.target.value 值。
我得到一个
Error in v-on handler: "TypeError: Cannot read property 'value' of undefined"
错误。
下面是我的 Vue 组件代码。
我从另一个组件将其称为 <account-search v-model="newAccountForm.parent"></account-search>
。
v-on:change.native="handleChange"
似乎根本不起作用。
<template>
<div>
<el-select :value="value" placeholder="Select" @change="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "accountSearch",
props: {
value: {
type: String
}
},
data(){
return {
options:[
{
value: 1,
label: "hello"
},
{
value : 2,
label : "ola"
}
],
loading: false,
}
},
mounted() {
},
methods: {
handleChange: function (event) {
console.log(event.target.value);
// this.$emit('input', value);
},
}
}
</script>
<style scoped>
</style>
非常感谢任何帮助。
您在 handleChange
中获得的参数是 value
而不是 event
<template>
<div>
<el-select :value="value" placeholder="Select" @input="handleChange">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
name: "accountSearch",
props: {
value: {
type: String
}
},
data(){
return {
options:[
{
value: 1,
label: "hello"
},
{
value : 2,
label : "ola"
}
],
loading: false,
}
},
mounted() {
},
methods: {
handleChange: function (value) {
console.log(value);
this.$emit('input', value);
},
}
}
</script>
<style scoped>
</style>