vue-property-decoratorでのvue.jsのフィルターの書き方

公式ドキュメントのサンプルをvue-property-decoratorで使って書き直してみる

フィルター — Vue.js

素のvue.jsの場合

<template>
  <p>{{ message | capitalize }}</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      message: 'hellow'
    }
  }
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}
</script>

vue-property-decoratorの場合

<template>
  <p>{{ message | capitalize }}</p>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  filters: {
    capitalize(value: string) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
export default class Sample extends Vue {
  message = 'hello'
}
</script>