Vue Dynamic Attribute

Question

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

craig_h · Accepted Answer · 2017-09-22 11:21:33Z

4

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>

answered Sep 22, 2017 at 11:21

craig_h

32.8k7 gold badges61 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

craig_h Over a year ago

You seem to be pretty luke warm about computeds, but that's standard in Vue and every other MVVM framework. You can of course write it in line, but that's just nasty: :viewBox="'0 0 '+ x + ' ' y"

sheriffderek Over a year ago

Not sure what has changed since, but the interpolation or how the value is generated doesn't seem to be what's causing the camelCase attribute to be lowercased: codepen.io/perpetual-education/pen/ExdLWEJ

Eric Aya · Accepted Answer · 2022-11-01 14:44:11Z

2

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

edited Nov 1, 2022 at 14:44

Eric Aya

70.2k36 gold badges190 silver badges266 bronze badges

answered Nov 1, 2022 at 12:36

Brandon3296

334 bronze badges

1 Comment

sheriffderek Over a year ago

Ah ha! .came helper!!! :) codepen.io/perpetual-education/pen/BaqxWYZ

Collectives™ on Stack Overflow

Vue Dynamic Attribute

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related