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

我对Vue.js比较陌生，尝试基于此创建Vue组件，并希望在每个列表项中添加一个ionicon

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

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

相反，我尝试在设置图标样式时使用jQuery添加图标。将上述笔中的jQuery放入一个方法，样式：

正常创建一个图标，然后检查它会产生如下结果：

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

该组件已替换为ionicon。但是，检查该元件表明该部件未被更换：

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

我不太清楚为什么会这样

---

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

您必须将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>

---

谢谢你的回答，你能举一个使用选择标签的例子吗？对于这个解决方案，我不需要包括我添加的jQuery解决方案？我在模板标记中编写的代码就是jQuery代码添加到页面中的代码，所以不需要您在样式方法中添加的代码，我在您的代码面板中看到的是设置display:none用于选择标记，而使用ul li。你不能添加图标来选择元素，检查你的代码笔以查看选择是否隐藏。如果我理解正确，我可以跳过创建选择元素的步骤，只显示我想要显示的实际内容？完全正确！据我所见，select标记是jQuery元素生成器的源代码，而我们在vue中使用数据属性用于此目的，不再需要它了

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

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