Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error occurs when using it with Vue.defineCustomElement #1792

Open
kounetsuman opened this issue Aug 16, 2023 · 0 comments
Open

Error occurs when using it with Vue.defineCustomElement #1792

kounetsuman opened this issue Aug 16, 2023 · 0 comments
Labels

Comments

@kounetsuman
Copy link

kounetsuman commented Aug 16, 2023

Please respect maintainers time by filling in these sections. Your issue will likely be closed without this information.

  • Vue Version: 3.3.4
  • Vue Select Version: 4.0.0-beta.6(npm, not cdn)
  • Chrome: 115.0.5790.170
  • node: v16.20.2

Describe the bug
A clear and concise description of what the bug is.

→An error occurs when using it with a custom element

Uncaught TypeError: Cannot read properties of undefined (reading 'header')
    at Proxy.ve (vue-select.es.js:656:189)
    at renderComponentRoot (runtime-core.esm-bundler.js:935:16)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5774:46)
    at ReactiveEffect.run (reactivity.esm-bundler.js:217:19)
    at instance.update (runtime-core.esm-bundler.js:5887:51)
    at setupRenderEffect (runtime-core.esm-bundler.js:5895:5)
    at mountComponent (runtime-core.esm-bundler.js:5685:5)
    at processComponent (runtime-core.esm-bundler.js:5638:9)
    at patch (runtime-core.esm-bundler.js:5126:11)
    at mountChildren (runtime-core.esm-bundler.js:5370:7)

Reproduction Link
A link to a reproduction of the bug. This is a huge help.

→ nothing

Steps To Reproduce
Outline the steps to reproduce the bug.

→Occurs with the following implementation

SelectItem.vue

<template>
  <v-select :options="options" />
</template>

<script setup>
import vSelect from 'vue-select';

const options = [
  { text: 'Option 1', value: 1 },
  { text: 'Option 2', value: 2 },
  { text: 'Option 3', value: 3 },
];
</script>

Parent.js

import SelectItem from './SelectItem.vue';

const element = defineCustomElement(SelectItem);
window.customElements.define('p-select-item', element);

index.html

<p-select-item></p-select-item>

Expected behavior
A clear and concise description of what you expected to happen.

→used in Vue.defineCustomElement

Screenshots
If applicable, add screenshots to help explain your problem.

→ nothing

@kounetsuman kounetsuman changed the title An error occurs when using it with Vue.defineCustomElement Error occurs when using it with Vue.defineCustomElement Aug 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant