Question

我正在寻找如何在vuejs项目上渲染到组件。

我正在使用https://github.com/juliuste/parliament-svg来创建图表。

这是我的代码

created() {
    let parties = {
      linke: {
        seats: 64,
        colour: "#a08"
      },
      spd: {
        seats: 193,
        colour: "#e02"
      },
      gruene: {
        seats: 63,
        colour: "#0b2"
      },
      union: {
        seats: 311,
        colour: "#333"
      }
    };
    const svg = parliamentSVG(parties, true);
    var stringify = require("virtual-dom-stringify");
    this.parliamentSVG = stringify(svg);
  }

返回

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-20.487130703115444,-20.487130703115444,40.97426140623089,20.97426140623089"><circle cx="-20" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.9766445366" cy="-0.9662675905" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.9066326944" cy="-1.9302784183" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.790127989" cy="-2.8897809914" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.6274025228" cy="-3.8425343471" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.4188363485" cy="-4.7863132858" r="0.38970456249235585" fill="#a08" class="linke"></circle><circle cx="-19.1649165822" cy="-5.718913568" r="0.38970456249235585" fill="#e02" class="spd"></circle><circle cx="-18.8662362652" cy="-6.6381570626" r="0.38970456249235585" fill="#e02" class="spd"></circle><circle cx="-18.5234929792" cy="-7.5418968338" r="0.38970456249235585" fill="#e02" class="spd"></circle><circle cx="-18.137487217" cy="-8.4280221555" r="0.38970456249235585" fill="#e02" class="spd"></circle><circle cx="-17.7091205131" ....

在<div>{{parliamentSVG}}</div>

中

我正在寻找一种呈现为图形的方式。

Answer 1

如documentation中所述：

双胡须将数据解释为纯文本，而不是HTML。为了输出真实的HTML，您将需要使用v-html指令。

在您的情况下：

<div v-html="parliamentSVG"></div>

vuejs在组件上渲染<svg>标签

1 个答案: