When fetching data from my backend to use in my frontend with vue.js, I encountered an issue where I wanted to change an SVG fill attribute using a vue variable.
The problem arises when it displays (in the source code) like this:
<rect width="500" class="color color-1" height="500" fill="[% colorAttr() %]"></rect>
instead of:
<rect width="500" class="color color-1" height="500" fill="#fafafa"></rect>
Can anyone point out what mistake I might be making?
Fiddle : https://jsfiddle.net/cy5gevLy/
HTML :
<div id="colorHandler">
<p>[% colorAttr() %]</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 856.2987727011634 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g id="c" transform="translate(0, 0) scale(1.736, 1)">
<g>
<rect width="500" class="color color-1" height="500" fill="[% colorAttr() %]"></rect>
</g>
</g>
</svg>
</div>
JavaScript :
var color = new Vue({
el: '#colorHandler',
methods:{
colorAttr:function(){
var my_color = '#fafafa';
return my_color
}
},
delimiters: ["[%","%]"]
});
Any suggestions on how I can correctly display my chosen color in the svg attribute?