Home>

I'm having trouble setting up Vue Select in Vue.js 3 with an error.
Depending on the environment, the import statement cannot be used, so it is read from the script tag.

There are two warnings and errors, but the cause has not been identified.
vue.global.js: 1235 [Vue warn]: Unhandled error during execution of created hook
vue.global.js: 1414 Uncaught TypeError: this. $On is not a function

If anyone knows how to solve it, please teach me.

(Vue Select)
https://vue-select.org/

No warning is issued if the v-select tag is not used.
->

When I use the v-select tag, I get the following error:

Corresponding source code

File for reading

<link rel = "stylesheet" href = "~/lib/vue-select/vue-select.css" />
<script src = "~/lib/vue/vue.global.js"></script>
<script src = "~/lib/vue-select/vue-select.js"></script>

javascript executable file


    Vue Select
  <!-Error when using v-select->
  <v-select: options = "options"></v-select>

<script>
  <!-I can get it without window->
    var test1 = Vue;
    var test2 = VueSelect;
    // Create an instance of Vue.js 3
    const app = Vue.createApp ({{
        data () {
            return {
                options: [1, 2]
            }
        }
    });
    app.component ("v-select", VueSelect.VueSelect);
    const vm = app.mount ("# app");
</script>
}
You are running a development build of Vue.
Make sure to use the production build (* .prod.js) when deploying for production.
vue.global.js: 1235
[Vue warn]: Unhandled error during execution of created hook
  at<VSelect options = Array (2)>
  at 
warn @ vue.global.js: 1235
logError @ vue.global.js: 1408
handleError @ vue.global.js: 1400
callWithErrorHandling @ vue.global.js: 1354
callWithAsyncErrorHandling @ vue.global.js: 1360
callSyncHook @ vue.global.js: 6850
applyOptions @ vue.global.js: 6797
finishComponentSetup @ vue.global.js: 7446
setupStatefulComponent @ vue.global.js: 7382
setupComponent @ vue.global.js: 7322
mountComponent @ vue.global.js: 5104
processComponent @ vue.global.js: 5080
patch @ vue.global.js: 4702
mountChildren @ vue.global.js: 4881
processFragment @ vue.global.js: 5043
patch @ vue.global.js: 4695
componentEffect @ vue.global.js: 5197
reactiveEffect @ vue.global.js: 400
effect @ vue.global.js: 375
setupRenderEffect @ vue.global.js: 5162
mountComponent @ vue.global.js: 5120
processComponent @ vue.global.js: 5080
patch @ vue.global.js: 4702
render @ vue.global.js: 5778
mount @ vue.global.js: 4174
app.mount @ vue.global.js: 9162
(anonymous) @ Create: 99
vue.global.js: 1414
Uncaught TypeError: this. $On is not a function
    at Proxy.created (Select.vue: 636)
    at callWithErrorHandling (vue.global.js: 1351)
    at callWithAsyncErrorHandling (vue.global.js: 1360)
    at callSyncHook (vue.global.js: 6850)
    at applyOptions (vue.global.js: 6797)
    at finishComponentSetup (vue.global.js: 7446)
    at setupStatefulComponent (vue.global.js: 7382)
    at setupComponent (vue.global.js: 7322)
    at mountComponent (vue.global.js: 5104)
    at processComponent (vue.global.js: 5080)
  • Answer # 1

    Sincerest apologies.

    About Vue Select, it seems that Vue 3 is not yet supported.
    It may be a version upgrade from December to January from the issue on Github, so please wait until it is supported.

    As for how to write the component of Vue3, it seems that it is good as follows.

    <script>
      <!-I can get it without window->
        var test1 = Vue;
        var test2 = VueSelect;
        // Create an instance of Vue.js 3
        const app = Vue.createApp ({{
            data () {
                return {
                    options: [1, 2]
                }
            }
        });
        app.component ("v-select", VueSelect.VueSelect);
        const vm = app.mount ("# app");
    </script>