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

问题描述

我对 Vue.js 比较陌生，尝试基于此自定义选择菜单创建一个 Vue 组件，并希望为每个列表项添加一个离子图标。

通常，我可以在 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 组件。

标签： javascriptjqueryvue.jsvuejs3

<template> <ul> <li for="option in options" :key="option.rel" :rel="option.rel"> <component class="icon" :is="option.icon" /> <p>{{ option.text }}</p> </li> </ul> </template> <script> export default { data(){ return { options:[ {rel:'hide', text:'-- Month --', icon: 'md-person-icon'}, {rel:'january', text:'january', icon: 'md-person-icon'}, {rel:'february', text:'february', icon: 'md-person-icon'}, ... ], } } } </script>

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

问题描述

解决方案

推荐阅读