element-plus/element-plus-nuxt-starter

Another option is displayed in Select Component

takimotoSE opened this issue · 4 comments

Hi, element-plus-nuxt-starter team!
I'm using Element-plus with Nuxt3.
That's where I encountered the problem in the issue title.

In the code, they are separate components, but each option is displayed together as shown in the image.
スクリーンショット 2021-11-02 18 25 22
スクリーンショット 2021-11-02 17 38 57
スクリーンショット 2021-11-02 17 39 03

I just added the code to this repository, is this a problem with the way it is written?
Or is this a problem in the Nuxt3 situation?😔

Please advise🙇

Can you provide a minimum reproducible repo? Thanks.

OK!
I will provide.

pages/index.vue

<template>
  <!-- Remove this component to get started! -->
  <div class="page-index">
    <div class="display-logo">
      <img
        class="logo"
        src="https://element-plus.org/images/element-plus-logo.svg"
      />
      <NuxtLogo class="logo" />
    </div>
    <h2>
      <a target="_blank" href="https://v3.nuxtjs.org/">Element Plus</a>
      With
      <a target="_blank" href="https://v3.nuxtjs.org/">NuxtJS</a>
    </h2>
    <p>
      <el-button @click="hello">Hello</el-button>
    </p>

    <!-- The code I added -->
    <el-select v-model="value1" multiple placeholder="Select">
     <el-option label="label1" value="1"></el-option>
     <el-option label="label2" value="2"></el-option>
    </el-select>

    <el-select v-model="value2" multiple placeholder="Select">
     <el-option label="label3" value="3"></el-option>
     <el-option label="label4" value="4"></el-option>
    </el-select>

  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus/lib';
import NuxtLogo from '../components/NuxtLogo.vue';

const hello = () => ElMessage.info('hello world');

const value1 = '';
const value2 = '';
</script>

<style>
.page-index {
  margin-top: 60px;
  text-align: center;
}

.display-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 15rem;
  margin: 1rem;
}
</style>

Resolved this isuue!!!
I developed it with SSR, but I solved it by changing it to CSR😃
Thanks.

Sorry, I just went on looking here. Has your problem been solved?
If it is resolved, you can close the issue and add your specific solution.
Thanks. 😆