Question

我有一个显示量规的Vue组件。我需要在显示器上包括单位，并将其作为组件的道具之一。但是，由于存在许多具有不同格式的仪表，所有仪表都存储在从API读取其设置的vuex存储中。除了我想带特殊符号（例如度数符号）时，这一切都很好。 vuex对象将格式设置对象存储为：

{"min":0,"max":50,"dp":1,"units":"&deg;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>

Answer 1

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

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

您可以通过查看here来找到原因。

希望这会有所帮助！

vue组件未渲染度符号

1 个答案: