时间戳

首页 > 解决方案 > Vue组件未呈现度数符号

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

问题是这只是显示°C 而不是度数符号。如果我将最后一行硬编码为

g-units="&deg;C"

这一切都按预期工作。我怀疑是我不得不使用 v-bind 来传递属性，这把事情搞砸了。有没有办法确保 v-bind 按我的意愿对待我的角色？

编辑：这是实际渲染单元的 svg-gauge 组件模板。

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

标签： vue.js

解决方案

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

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

您可以通过查看此处找到原因。

希望这可以帮助！

推荐阅读