[Vuejs]-How to calculate SVG viewBox via vue.js?

by

3👍

✅

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}`
}
👤Barthy

1👍

You should use computed instead

Vue.component('icon', {
props: {
    width: {
        type: Number,
        default: 24
    },
    height: {
        type: Number,
        default: 24
    }
},
computed: {
    viewBox() {
        return '0 0 ' + this.width + ' ' + this.height
    }
}
template: '<svg xmlns="http://www.w3.org/2000/svg" :viewBox="viewBox" :width="width" :height="height"></svg>',
})
👤ittus

Leave a comment