实现 Vue-Select2 的 Vuejs 未显示在结果中

Question

在安装 vue3-select2-component 和他们的文档后，我实现了它。它没有显示在 html 的输出中，但我在源代码

中有 html

顺便说一句：我在 Laravel 框架

上使用 inertiajs

安装：

// npm install
npm install vue3-select2-component --save

用作组件：

import {createApp, h} from 'vue'
import BootstrapVue3 from 'bootstrap-vue-3'
import IconsPlugin from 'bootstrap-vue-3'
import {InertiaProgress} from "@inertiajs/progress";
import {createInertiaApp, Head} from '@inertiajs/inertia-vue3'
import {Link} from "@inertiajs/inertia-vue3"
///...
import Select2 from 'vue3-select2-component';

import {createStore} from "vuex"

///...

createInertiaApp({
    resolve: async name => {
        return (await import(`./pages/${name}`)).default;
    },
    setup({el, App, props, plugin}) {
        createApp({render: () => h(App, props)})
            .use(plugin)
            .use(bootstrap)
            .use(BootstrapVue3)
            .use(IconsPlugin)
            .use(VueSweetalert2)
            .component('Link', Link)
            .component('Select2', Select2)
            .mount(el)
    },
    title: title => 'azizam - ' + title
}).then(r => {
});

我想在其中使用的 vuejs 页面：

<template>
<Select2 v-model="myValue" :options="myOptions"
         :settings="{ settingOption: value, settingOption: value }"
         @change="myChangeEvent($event)"
         @select="mySelectEvent($event)" />
</template>

<script>
import menubar from "./menubar";
import emulator from "./emulator";
import {mapActions} from "vuex";
import notification from "../../../partials/notification";
export default {
    name: "image",
    data() {
        return {
            caption: '',
            myValue: '',
            myOptions: ['op1', 'op2', 'op3']
        }
    },
    components: {
        menubar,
        emulator,
        notification
    },
    methods: {
        ...mapActions([
            'changeBreadcrumb'
        ]),
        myChangeEvent(val){
            console.log(val);
        },
        mySelectEvent({id, text}){
            console.log({id, text})
        }
    },
    mounted() {
        const payload = {
            title: 'محصولات',
            subTitle: 'ایجاد محصول تک عکس در سامانه'
        };
        this.changeBreadcrumb(payload);
    }
}
</script>

控制台日志：

Warning - slinky.min.js is not loaded. application.js:336:21
[Vue warn]: A plugin must either be a function or an object with an "install" function. vendor.js:10544:17
[Vue warn]: Plugin has already been applied to target app. vendor.js:10544:17

Use of Mutation Events is deprecated. Use MutationObserver instead. content.js:19:11
Source map error: Error: request failed with status 404
Resource URL: http://127.0.0.1:8000/js/vendor.js?id=594b688c9609a79fb52afd907a69c736
Source Map URL: tooltip.js.map

在 console 中，如您所见，我没有收到任何关于此 component

的错误

html源代码：

<select2 options="op1,op2,op3" settings="[object Object]"></select2>

然后 webpack:

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    //.sass('resources/scss/app.scss','public/css')
    .extract()
    .vue({
        version: 3,
        options: {
            compilerOptions: {
                isCustomElement: (tag) => ['Select2'].includes(tag),
            },
        },
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .version();

Answer 1

问题是您已将 Vue 配置为将 <Select2> 视为自定义元素，因此不会呈现实际组件。

修复方法是删除该配置：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    //.sass('resources/scss/app.scss','public/css')
    .extract()
    .vue({
        version: 3,

        //options: {
        //    compilerOptions: {
        //        isCustomElement: (tag) => ['Select2'].includes(tag), ❌ remove this
        //    },
        //},
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .version();

实现 Vue-Select2 的 Vuejs 未显示在结果中

Vuejs implementing Vue-Select2 not showing on result

javascript

laravel

vue.js

vuejs3

jquery-select2