CODEWITHSUNDEEP
vue.jsvuejs2
Jan Schmutz
Jan Schmutz

Reputation: 890

Vue Dynamic Attribute

I have a Svg and would like to make some parts of the viewbox attribute dynamic.

svg :viewBox="0 0 {{x}} {{y}}" :width="x" :height="y">

</svg>

What is the right syntax to implement this

Upvotes: 2

Views: 1212

Answers (2)

Brandon3296
Brandon3296

Reputation: 33

The accepted solution does not work appropriately due to how svg handles viewBox.

You need to bind it as follows: <svg :view-box.camel="viewbox" :width="x" :height="y"></svg>

With the other answer Vue converts the camel case of viewBox to all lowercase and the component does not render correctly. This will keep the correct camel case on viewBox

Upvotes: 2

craig_h
craig_h

Reputation: 32734

You can't use interpolation, you will need a computed:

computed:{
  viewbox(){
    return "0 0 " + this.x + " " + this.y;
  }
}

Then in your markup:

<svg :viewBox="viewbox" :width="x" :height="y"></svg>

Upvotes: 4

Related Questions