svg 채우기 속성에서 vue.js 변수를 호출하려면 어떻게해야합니까?

Question

내 백엔드에서 데이터를 검색하고 vue.js를 사용하여 프론트 엔드에 사용합니다.이 경우, vue 변수로 SVG 채우기 속성을 변경하고 싶습니다. 내가 잘못 뭐하는 거지

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

:

문제는 작동하지 않는다는 것입니다 및 (소스 코드)로 보여줍니다

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

자바 스크립트 : 내가 잘못 뭐하는 거지

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>