Raw HTML inside v-model inside vuejs template

Question

在我的应用程序中，我想使用标准的 bootstrap-vue 单选按钮。在文本的旁边，我想放一个小图标。在原型设计阶段，当我使用 JS 和来自 CDN 的 CSS 时，我想出了这个让我满意的解决方案：

app = new Vue({
  el: "#app",
  data: {
    mode: 'trx',
    mode_options: [
      { text: '<i class="fas fa-cloud-upload-alt"></i> UP', value: 'up' },
      { text: '<i class="fas fa-cloud-download-alt"></i> DOWN', value: 'down' }
    ],
  }
})

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>
<body>
  <div id="app">
    <b-form-radio-group id="btnradios_mode"
                            buttons
                            v-model="mode"
                            button-variant="outline-secondary"
                            :options="mode_options"
                            name="radiosBtnDefault" />
  </div>
</body>
</html>

不幸的是，当我开始转向生产版本并使用带有模板的 VUE-CLI 时，相同的代码不起作用：图标不显示。在试图理解这个问题时，我开始怀疑 RAW HTML 在 v-model（通常是 v-*）中的处理方式存在一些问题，但我无法完全 understand/debug问题。

有人会建议解决方法吗？对我来说，另一种将图标嵌入无线电组的方法也不错。

Answer 1

<template>
    <div>
        <b-form-radio-group id="btnradios_mode"
                            buttons
                            v-model="mode"
                            button-variant="outline-secondary"
                            name="radiosBtnDefault" >
            <b-form-radio v-for="opt in mode_options" :key="opt.value" :value="opt.value">
                <i :class="opt.icon"/>
                {{ opt.text }}
            </b-form-radio>
        </b-form-radio-group>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                mode: 'trx',
                mode_options: [
                    { icon: 'fas fa-cloud-upload-alt', text: 'UP', value: 'up' },
                    { icon: 'fas fa-cloud-download-alt', text: 'DOWN', value: 'down' }
                ],
            }
        }
    }
</script>

Raw HTML inside v-model inside vuejs template

Raw HTML inside v-model inside vuejs template

javascript

icons

radio-group

vuejs2

bootstrap-vue