I’m probably missing something obvious but I can’t get a simple DropdownListComponent
work:
const {createApp} = Vue;
const app = createApp({
template: '#mySelect',
components: {
'ejs-dropdownlist': ejs.dropdowns.DropDownListComponent,
},
data: () => ({
myValue: null,
}),
created() {
this.myDataSource = [
{id: 1, content: "content1"},
{id: 2, content: "content2"},
];
this.fields = {text: "content", value:"id"};
},
methods: {
onMyValueChange() {
console.log(this.myValue);
},
},
});
app.mount("#myApp");
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.syncfusion.com/ej2/27.1.48/ej2-vue-es5/dist/ej2-vue.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="myApp" style="width: 10rem; margin: 0 auto;"></div>
<template id="mySelect">
<ejs-dropdownlist
placeholder='Select me'
:v-model="myValue"
:dataSource='myDataSource'
:fields='fields'
@change='onMyValueChange()'
>
</ejs-dropdownlist>
</template>
</body>
What am I doing wrong?