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>

  <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>