Question

在我的应用程序中，我想使用标准的Bootstrap-Vue单选按钮。在文本的旁边，我想放一个小图标。在原型设计阶段，当我使用CDN的JS和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与模板一起使用时，相同的代码不起作用：图标不显示。在尝试理解问题时，我开始怀疑在v模型（通常为v- *）中如何处理RAW HTML的方式存在一些问题，但是我无法完全理解/调试问题。

有人会建议解决方法吗？对我来说，将图标嵌入到广播组中的另一种方法也很好。

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>

vue.js模板内的v模型内的原始HTML

1 个答案: