svg fill Atribute의 vue.js 변수를 호출하려면 어떻게 해야 합니까?

svg fill Atribute의 vue.js 변수를 호출하려면 어떻게 해야 합니까?

백엔드에서 데이터를 가져와 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 속성에 제 색상을 표시할 수 있나요?

속성에는 보간을 사용하지 마십시오.바인딩 구문을 사용합니다.

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

Vue에서 SVG와 일하는 것은 까다롭다는 것이 증명되었으므로 행운을 빈다. :)

언급URL : https://stackoverflow.com/questions/44100725/how-can-i-call-vue-js-variable-in-a-svg-fill-attribute