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

Question

我对 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();

        }

    }

该组件已替换为 ionicon。但是，检查元素显示组件未被替换：

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

我不太清楚为什么会这样。

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

Answer 1

您必须将 jQuery 创建的元素传输到 Vue，因为 jQuery 在运行时添加的内容不会绑定并且 Vue 无法检测到，这是我看到您的 jquery 代码正在执行的示例<template>&nbsp; <ul>&nbsp; &nbsp; <li for="option in options" :key="option.rel" :rel="option.rel">&nbsp; &nbsp; &nbsp; <component class="icon" :is="option.icon" />&nbsp; &nbsp; &nbsp; <p>{{ option.text }}</p>&nbsp; &nbsp; </li>&nbsp; </ul></template><script>&nbsp;export default {&nbsp; &nbsp;data(){&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; options:[&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{rel:'hide', text:'-- Month --', icon: 'md-person-icon'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{rel:'january', text:'january', icon: 'md-person-icon'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{rel:'february', text:'february', icon: 'md-person-icon'},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...&nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; }&nbsp; }}</script>