First of all, a disclaimer, we cannot update the package from version 1.0.1-beta.24.
So I'm using Element plus Select in a Vue 3 project, It comes from a template I bought. I literally copy pasted the code from it. But when I click on it, th options are not being shown. After debugging for a while. I see that the options popover appears in the DOM. But when I click it, the property display remains none.
Code:
<el-select
v-model="selects"
multiple
filterable
placeholder="Multiple select"
>
<el-option
v-for="option in selectOptions"
:key="option.label"
:label="option.label"
:value="option.value"
>
</el-option>
</el-select>
import { ElSelect, ElOption } from "element-plus";
export default {
components: {
[ElSelect.name]: ElSelect,
[ElOption.name]: ElOption,
},
setup(){
const selectOptions = [
{
label: "Alerts",
value: "Alerts",
},
{
label: "Badges",
value: "Badges",
},
{
label: "Buttons",
value: "Buttons",
},
{
label: "Cards",
value: "Cards",
},
{
label: "Forms",
value: "Forms",
},
{
label: "Modals",
value: "Modals",
},
];
}
const selects = ref([
"Alerts",
"Badges",
"Buttons",
"Cards",
]);
return {
selectOptions,
selects,
};