Javascript 如何在svg填充属性中调用vue.js变量？

我从后端检索数据，并将其用于带有vue.js的前端，在这种情况下，我希望使用vue变量更改SVG填充属性

问题是它不工作，并显示为（在源代码上）：

---

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

不要在属性中使用插值。使用

还是捷径

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

---

我使用了建议的方法，还添加了条件逻辑，从方法内部动态设置颜色

methods: {
  setAsActiveColor () {
  const activeColor = '#eeeeee';
  const inactiveColor = '#0a0a0a';
  if (this.toggleMoreOptions.moreOptionsToggled) return activeColor;
  return inactiveColor;
  }
}

事实证明，在Vue中与SVG合作非常棘手，因此祝你好运！：）

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

var color = new Vue({
  el: '#colorHandler', 
  methods:{
    colorAttr:function(){
        var my_color = '#fafafa';
        return my_color
    }
  },
  delimiters: ["[%","%]"]
});

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

methods: {
  setAsActiveColor () {
  const activeColor = '#eeeeee';
  const inactiveColor = '#0a0a0a';
  if (this.toggleMoreOptions.moreOptionsToggled) return activeColor;
  return inactiveColor;
  }
}