Vue.js vue组件未呈现度符号

我有一个显示仪表的vue组件。我需要在显示器上包括单位，并将其作为组件的道具之一。但是，由于有许多具有不同格式的仪表，因此所有仪表都存储在vuex存储中，该存储从API读取其设置。这一切都很好地工作，除了当我想把特殊的符号（如学位标志）跨越。vuex对象将格式化对象存储为：

{"min":0,"max":50,"dp":1,"units":"°C"}

我在我的组件中使用它，如下所示：

            <svg-gauge v-else
                v-bind:g-value="device.value"
                v-bind:g-min="device.format.min"
                v-bind:g-max="device.format.max"
                v-bind:g-decplace="device.format.dp"
                v-bind:g-units="device.format.units"
            >

一切正常。我怀疑我必须使用v-bind来传递属性，这会把事情搞砸。有没有办法确保v-bind像我所希望的那样对待我的角色

编辑：这是svg仪表组件模板，实际渲染单位

<template>
    <b-row>
        <b-card no-body class="bg-dark text-light border-0" align="center">
            <b-card-body class="m-0 pt-0 pb-0">
                <h5><slot name="title">Title</slot></h5>
                <div class="row mini-gauge pt-3" align="center">
                    <vue-svg-gauge
                        class="mini-gauge"
                        :start-angle="-90"
                        :end-angle="90"
                        :value="gValue"
                        :separator-step="0"
                        :min="gMin"
                        :max="gMax"
                        base-color="#595959"
                        :gauge-color="[{ offset: 0, color: '#347AB0'}, { offset: 100, color: '#D10404'}]"
                        :scale-interval="5"
                    >
                        <div style="line-height: 11rem">{{gValue.toFixed(gDecplace)}} {{gUnits}}</div>
                    </vue-svg-gauge>
                </div>
                <div class="row mini-gauge">
                    <div class="col" align="left">{{gMin}}</div>
                    <div class="col" align="right">{{gMax}}</div>
                </div>
            </b-card-body>
        </b-card>
    </b-row>
</template>

标题
{{gValue.toFixed（gDecplace）}{{gUnits}}
{{gMin}
{{gMax}}

将此行更改为带有v-html的跨距。然后在v-html中传递gUnits道具

 <div style="line-height: 11rem">
     {{gValue.toFixed(gDecplace)}} 
      <span v-html="gUnits"></span> 
 </div>

{{gValue.toFixed（gDecplace）}

你可以通过查看找到原因

---

希望这有帮助

将此行更改为具有v-html的跨距。然后在v-html中传递gUnits道具

 <div style="line-height: 11rem">
     {{gValue.toFixed(gDecplace)}} 
      <span v-html="gUnits"></span> 
 </div>

{{gValue.toFixed（gDecplace）}

你可以通过查看找到原因

---

希望这有帮助

你好；）您可以添加如何在svg仪表组件中显示

g-units

prop吗？@Raffobaffo，谢谢，我已经编辑了这个问题。您好；）您可以添加如何在svg仪表组件中显示

g-units

prop吗？@Raffobaffo，谢谢，我已经编辑了这个问题。