Default binding inline style with number in object to `px`

When we want to bind inline style with object, we might use object in data like this way.

data() {
  return {
    style: {
      width: '400px',
    },
  };
}

I think it might be useful for users to just write number and it will suffix with px automatically.

data() {
  return {
    style: {
      width: 400,
    },
  };
}

Is it possible to default unit with px when using numbers?

[CYBAI]

@kazupon

Looks good to me though I hope vue will support suffix px automatically 😄 Besides, using filters or computed properties might be more flexible for users. Thanks for your reply and great example.

[kazupon]

@CYBAI I think it’s possible to implement with computed properties. Also, In Vue.js 2.1 later, we can use the filter of v-bind.

e.g.

const prefix = val => {
  return val + 'px'
}
new Vue({
  computed: {
    prefixedStyle () {
      return prefix(this.style)
    }
  },
  data () {
    return {
      style: {
        width: 400,
      }
    }
  },
  filters: { prefix }
}

<!-- computed property -->
<img :width="prefixedStyle">

<!-- v-bind filter-->
<img :width="style | prefix ">