Vuejs 키 : 값의 구분 기호 인 콜론을 포함하는 특성을 추가하기 위해 v-attr을 사용하려고합니다. 컴파일되지 않습니다.콜론 'xmlns : href'가 포함 된 특성이있는 v-attr을 사용하면 컴파일되지 않습니다.
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink"
v-attr="xmlns:href: '#' + iconID"></use>
</svg>
또한 유사한 결과를 가지고
<svg class="lego-icon">
<use xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:href="#[[ iconID ]]"></use>
</svg>
나는 vue.js를 사용하지 않았지만 the source for v-attr을 보면 xlink : href를 처리하도록 설계된 것처럼 보입니다.
귀하의 속성이 잘못되었습니다. xmlns:href이 아니라 xlink:href이어야합니다. 시도 :
<svg>
<use v-attr="xlink:href: '#' + iconID"></use>
</svg>
xmlns:xlink="http://www.w3.org/1999/xlink"를 필요가 없습니다).
당신은 당신의 인 XLink를 포장해야합니다 HREF를 따옴표로 뷰가 vue.js의 새 버전으로 인수 구분 기호로 (https://github.com/yyx990803/vue/issues/648)
<use v-attr="'xlink:href' : '#' + iconID">
이것은 유효한 대답입니다. – rayfranco
을 콜론을 취급하지 않도록, 당신은 사용할 수 있습니다
<use v-bind:href="'#icon-' + iconId"></use>
또는
<use :href="'#icon-' + iconId"></use>
에도
이 (가) 올바른 네임 스페이스로 특성을 자동으로 설정하는 것처럼 보입니다.
나는 똑같은 문제가 있으며, 불행하게도이 문제를 해결할 수 없었다. 나는 항상 다음과 같은 오류 메시지를 보게된다 :'[Vue warn] : 잘못된 표현. 생성 된 함수 본문 : scope.href : '/ svg/ico.svg #'+ scope.option.icon' – nils
이 작업을 수행하려면 Florian 대답을 참조하십시오. – rayfranco