Question

我正在尝试使用表单输入来更改svg-element的vue.js，例如某些rect的位置和一些filter-value。

以下是使用两个范围输入的示例的一部分。另见https://jsfiddle.net/tyk4Ltkg/ 该位置没有任何问题：更改输入滑块后，rect示例的y坐标（ypos）已正确更新。

但是，模糊过滤器没有响应。虽然数字从输入范围到dom-element获得更新，但标签似乎转换为小写（stddeviation），之后我的浏览器（chrome）似乎忽略它。

我该如何解决这个问题？谢谢！

<div id='app'>
    <input type='range' v-model='stdev'>
    <input type='range' v-model='ypos'>

    <svg id="#mymainsvg">
        <defs>
            <filter id='mymainfilter'>
                <feGaussianBlur in='SourceGraphic' :stdDeviation=stdev ></feGaussianBlur>
            </filter>
        </defs>
        <rect :y=ypos width=100 height=100 style="filter:url(#mymainfilter)"></rect>
    </svg>
</div>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            ypos: 5,
            stdev: 13               
        }
    });       
</script>

Answer 1

<feGaussianBlur in='SourceGraphic' stdDeviation='{{stdev}}'></feGaussianBlur>

由于它不是Vue道具，因此您不使用：stdDeviation。相反，只需使用胡须来告诉Vue评估表达式。

vue.js：无法识别过滤器的大写标记名

1 个答案: