element-plus / element-plus-nuxt-starter

🌰 A starter example for element-plus with Nuxt 3.
https://element-plus-nuxt.vercel.app
MIT License
297 stars 82 forks source link

Another option is displayed in Select Component #14

Closed takimotoSE closed 3 years ago

takimotoSE commented 3 years ago

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πŸ™‡

YunYouJun commented 3 years ago

Can you provide a minimum reproducible repo? Thanks.

takimotoSE commented 3 years ago

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>
takimotoSE commented 3 years ago

Resolved this isuue!!! I developed it with SSR, but I solved it by changing it to CSRπŸ˜ƒ Thanks.

YunYouJun commented 3 years ago

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. πŸ˜†