如何在svg fill属性中调用vue.js变量？

Question

我从后端检索数据并将其用于vue.js的前端,对于这种情况,我想用vue变量更改SVG填充属性.

问题是它不起作用并显示为(在源代码上):

<rect width="500" class="color color-1" height="500" fill="[% colorAttr() %]"></rect>

代替 :

<rect width="500" class="color color-1" height="500" fill="#fafafa"></rect>

我究竟做错了什么 ？

小提琴: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: ["[%","%]"]
});

我做错了什么,如何在svg属性中显示我的颜色？

Answer 1

不要在属性中使用插值.使用绑定语法.

<rect width="500" class="color color-1" height="500" v-bind:fill="colorAttr()"></rect>

或快捷方式

<rect width="500" class="color color-1" height="500" :fill="colorAttr()"></rect>