0

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.

Hidden: enter image description here

Open: enter image description here

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,
};
Jarliev Pérez
  • 282
  • 6
  • 18

0 Answers0