やりたいこと
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),
], //★↑ここ
},
],
}
},
},
}