VueJS + jQuery：在Vue.js中动态创建组件

如何解决VueJS + jQuery：在Vue.js中动态创建组件

我对Vue.js相对较新，试图基于此custom select menu创建Vue组件，并希望为每个列表项添加一个ionicon。

通常，我可以在Vue.js中使用以下行（带有相关的导入图标）创建图标：

<component class="icon" :is="name-of-icon"></component>

但是，我要复制的自定义选择菜单隐藏了默认的select元素，并使用自定义CSS样式动态添加了自己的元素。

因此，以下不是解决方案，因为它要求我使用默认的select样式：

<option v-for="option in options" :value="option">
    <component class="icon" :is="icon"></component 
    <p>{{ option }}</p>
</option>

相反，我尝试在样式化时使用jQuery添加图标。将上述笔中的jQuery放入方法style()：

<template>
    <select>
        <option v-for="option in options" :value="option">
            {{ option }}
        </option>
    </select>
</template>
<script>
    import MdPersonIcon from 'vue-ionicons/dist/md-person.vue'

    export default {
        name: 'custom-select',components: {MdPersonIcon},methods: {
            style() {
                $('select').each(function () {

                    // rest of code from pen here

                    for (let i = 0; i < numberOfOptions; i++) {
                        let option = $('<li />',{
                            rel: $this.children('option').eq(i).val()
                        });
                        let text = $this.children('option').eq(i).text();
                        let $icon = $('<component>',{
                            'class': 'icon',':is': 'md-person-icon',});
                        let $label = $('<p>',{
                            text: text
                        });

                        $icon.appendTo(option);
                        $label.appendTo(option);
                        option.appendTo($list);
                    }

                    // rest of code from pen here
                });
            }
        },mounted() {
            this.style();
        }
    }
</script>
<style>
    /* rest of CSS from the pen here */
    .icon {
        padding: 8px 8px 8px 0;
        margin: 0;
    }
</style>

组件的用法以及（其中options是一个字符串数组）：

<custom-select :options="options"></custom-select>

正常创建图标，然后对其进行检查，会产生类似以下内容：

<div class="ion profile-icon" data-title="Md Person Icon" data-name="md-person-icon" data-v-fc38bec4="">
    <svg viewBox="0 0 512 512" class="ion__svg">
        <path d="some long string"></path>
    </svg>
</div>

该组分被离子离子取代。但是，检查该元素表明该组件未被替换：

<component class="icon" :is="md-person-icon"></component>

我不太确定为什么会这样。

我知道我不应该不尝试混合使用jQuery和Vue，但是我目前无法想到另一种创建自定义选择菜单Vue组件的方法。

解决方法

您必须将jQuery创建的元素转移到Vue，因为jQuery在运行时添加的内容不会被Vue绑定并且无法被Vue检测到，这是示例，我看到您的jquery代码正在执行

hasFiles