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

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

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

Answer 2

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

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

在Vue中使用SVG已被证明很棘手，所以祝您好运！：）

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

2 个答案: