vuejs flex bug?

[cevio]

I got a problem with vuejs while using :style="flex:...".Here is the code:

html:

<div id="demo">
    <div :style="style"></div>
</div>

js:

new vue({
    el: document.getElementById('demo'),
    data: {
        flex: 1
    },
    computed: {
        style: function(){
            return [
                '-webkit-box-flex: ' + this.flex,
                '-webkit-flex: ' + this.flex,
                '-ms-flex: ' + this.flex,
                'flex: ' + this.flex
            ].join(';');
        }
    }
})

run it, and i got element like this:

<div id="demo">
    <div style="flex: 1 0 100%;"></div>
</div>

In IOS ,it is right., but in android browser, it is broken.

It should be like this:

<div id="demo">
    <div style="-webkit-box-flex: 1 0 100%; flex: 1 0 100%; -webkit-flex: 1 0 100%; -ms-flex: 1 0 100%;"></div>
</div>

I want to get other prefixed properties. How to do it?

sorry , my english is poor. so ...

[finico]

@cevio :style has autoprefixer and checks styles in CSSStyleDeclaration

You can ckeck it in different browsers

const props = ['MozBoxFlex', 'webkitBoxFlex', 'webkitFlex', 'msFlex', 'flex'];
const div = document.createElement('div');
console.log(props.filter(s => div.style[s] !== void 0));

Browser puts a value only if it is able to work with it and it is necessary.. So, your code can be simplified

...
computed: {
    style: function(){
        return {
            'boxFlex': this.flex,
            'flex': this.flex
        };
    }
}
...

[simplesmiler]

As @finico said, :style prefixes your styles automatically for the current browser. If there are any actual issues with that (e.g. no prefix where it should be), then please report these.

[cevio]

@finico @simplesmiler thanks for your help. I have alreay resolve this problem. thanks so much!