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

Vue 3 Composition api Support #1373

Closed
lebadapetru opened this issue Feb 17, 2021 · 3 comments
Closed

Vue 3 Composition api Support #1373

lebadapetru opened this issue Feb 17, 2021 · 3 comments
Labels

Comments

@lebadapetru
Copy link

I have a project build with symfony 5 & vue3 and i removed the options api using webpack encore:

.addPlugin(
    new webpack.DefinePlugin({
      // Drop Options API from bundle
      __VUE_OPTIONS_API__: false,
      __VUE_PROD_DEVTOOLS__: false
    })
  )

After successfully installing vue-select with: npm install git+https://github.com/sagalbot/vue-select.git#feat/vue-3-compat and fixing that pointerScroll.js error by upgrading webpack to the version 5 ( which adds the chaining support ) i receive another strange error and i'm not sure how to fix it, it isn't very explicit and it only throws it in the DevTools console:

Select.vue:7 Uncaught (in promise) TypeError: Cannot read property 'header' of undefined
    at Proxy.render (Select.vue:7)
    at renderComponentRoot (runtime-core.esm-bundler.js:696)
    at componentEffect (runtime-core.esm-bundler.js:4035)
    at reactiveEffect (reactivity.esm-bundler.js:42)
    at effect (reactivity.esm-bundler.js:17)
    at setupRenderEffect (runtime-core.esm-bundler.js:4018)
    at mountComponent (runtime-core.esm-bundler.js:3976)
    at processComponent (runtime-core.esm-bundler.js:3936)
    at patch (runtime-core.esm-bundler.js:3547)
    at componentEffect (runtime-core.esm-bundler.js:4053)

It says the problem is at thhis line: <slot name="header" v-bind="scope.header" />

My VueSelect wrapper:

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

<script>
import { onMounted } from 'vue'
import vSelect from '../../../../node_modules/vue-select/src/index.js';

export default {
  name: "VSelect2",
  components: {
    vSelect
  },
  setup() {
    onMounted(() => {
      console.log(vSelect)
    })
    return {
      options: [
        'option1',
        'option2'
      ]
    }
  }
}
</script>

<style scoped>

</style>

I'm not sure if this problem is caused by the removal of the option api but i had several problems with other packages as well that were written using vue's option api and since i'm removing it, the package cannot work, but i'm not sure what causes the above error...

@lebadapetru
Copy link
Author

Any news here?

@lebadapetru
Copy link
Author

Any news here?

@sagalbot sagalbot added the vue 3 label Oct 21, 2021
@sagalbot
Copy link
Owner

If you're still using - try again with the beta. Install vue-select@beta. If you have an issue please track it at #1251. Thanks!

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

2 participants