2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[Vue.js]filterをコンポーネントのscript内で使えるようにするメモ

Last updated at Posted at 2019-05-30

やりたいこと

filterをコンポーネントのscript内で使えるようにしたい

ダメな例

<script>
export default {
  name: 'ThePieGraph',
  methods: {
    fillData() {
      this.datacollection = {
        datasets: [
          {
            data: [ 変数 | filter ], 
            // ↑★ここにfiletrを置きたいが、こういう書き方だとダメ
          },
        ],
      }
    },
  },
}

やったこと

いい例

src直下にpluginsディレクトリを切って、その中にfilter.jsを置く

prototypeを用いると、コンポーネントのscript内でも、関数としてfilterを呼び出すことができる


/**
 * 配列をオブジェクトから名前抽出
 * @param {String} key
 * @param {{}} obj
 * @returns {String}
 */
const objToName = (key, obj) => {
  if (obj[key] !== undefined) {
    return obj[key]
  }
  return key
}

export default {
  install(vue) {
    // 数値を小数点に変換する
    const decimalPointShaping = value => {
      // console.log('decimalPointShaping',value)
      if (!Number(value)) {
        return value
      }
      return Math.round(value)
    }
    vue.filter('decimalPointShaping', decimalPointShaping)

    // 全体から平均的なパーセントを割り出す
    const percentageCalculation = (value, sum) => {
      console.log('percentageCalculation', value, sum)
      return (value / sum) * 100
    }
    vue.filter('percentageCalculation', percentageCalculation)

    // APIの結果から人柄の結果を変換する
    const personalityConversion = value => objToName(value, big4)
    vue.filter('personalityConversion', personalityConversion)

    // APIの結果からbig5の結果を変換する
    const big5Conversion = value => objToName(value, big5)
    vue.filter('big5Conversion', big5Conversion)

    // 全体から平均的なパーセントを割り出し、かつ数値を整数に整形する
    const percentAndDecimal = (value, sum) =>
      decimalPointShaping(percentageCalculation(value,sum))


/********************** 対象の記述↓ **********************/
    // フィルターをコンポーネントスクリプト内で使えるようにする
    vue.prototype.$customFilter = {
      decimalPointShaping,
      personalityConversion,
      big5Conversion,
      percentageCalculation,
      percentAndDecimal,
    }
/********************** 対象の記述↑ **********************/

  },
}

使い方

<script>
export default {
  name: 'ThePieGraph',
  methods: {
    fillData() {
      this.datacollection = {
        datasets: [
          {
            data: [
              this.$customFilter.percentAndDecimal(this.big4_average,this.big4_sum),
              this.$customFilter.percentAndDecimal(this.big4_reserved,this.big4_sum),
              this.$customFilter.percentAndDecimal(this.big4_role_models,this.big4_sum),
              this.$customFilter.percentAndDecimal(this.big4_self_centered,this.big4_sum),
            ], //★↑ここ
          },
        ],
      }
    },
  },
}

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?