Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams template: '<svg xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" :width="width" :height="height"></svg>',

0 0 + width + height doesn't work, how to fix it? Im new in Vue.js.

Thanks!

In addition to the fact that you should define viewBox as a computed value like @ittus pointed out, 0 0 + width + height does not evaluate to a string because:

a) 0 0 is not valid javascript ( Uncaught SyntaxError: Unexpected number )

b) width and height are both numbers. 0 + width + height would evaluate to a number, 48 by default.

Use one of the following to create a string:

Concatenation ( Read more here ):

viewBox: {
    default: '0 0 ' + this.width + ' ' + this.height
or a template literal (Read more here):  
viewBox: {
    default: `0 0 ${this.width} ${this.height}`
template: '<svg xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" :width="width" :height="height"></svg>',
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.