时间戳

首页 > 解决方案 > vuejs模板内的v-model内的原始HTML

javascript - vuejs模板内的v-model内的原始HTML

问题描述

在我的应用程序中，我想使用标准的 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-model （通常为 v-*）中处理 RAW HTML 的方式存在一些问题，但我无法完全理解/调试问题。

有人会建议解决方法吗？对我来说，另一种在广播组中嵌入图标的方式也可以。

标签： javascriptvuejs2iconsradio-groupbootstrap-vue

解决方案

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

推荐阅读