Vue-computed-helpersを使用して一般的なVue.jsの計算プロパティを簡素化する
提供:Dev Guides
VueのComputedProperties は、開発時間を大幅に短縮する驚くべきイノベーションです。 それらの最も一般的な使用法のいくつかは、いくつかのデータ構造の「ローカルレデューサー」です。 (たとえば、配列から特定の要素を引き出したり、その長さを見つけたり、要素の数を数えたりするなどです。)このためのコードは特に複雑ではありませんが、持っているのはかなり面倒です。いつも書く。 vue-computed-helpers は、単純なワンライナーのセットを使用して、これらのユースケースの多くを処理します。
インストール
Vue.jsプロジェクトにvue-computed-helpers
をインストールします。
糸を使用している場合:
yarn add vue-computed-helpers
NPMの場合:
npm install vue-computed-helpers --save
使用法
vue-computed-helpers
は、以下に説明するいくつかの簡単なヘルパーメソッドを提供します。これらのメソッドを使用して、テンプレートに自動的に更新されるバインディングを作成できます。
例えば:
Example.vue
<template> <div class="alligator-information"> <p>There are {{numberOfHappy}} happy alligators.</p> <div v-for="alligator of alligators"> <p>Name: {{alligator.name}}</p> <p>Weight: {{alligator.weight}}</p> </div> </div> </template> <script> import { filter, count } from 'vue-computed-helpers'; export default { data() { return { alligators: [ { name: "Betty", weight: 850, isHappy: true }, { name: "Thompson", weight: 792, isHappy: false }, { name: "Hubert", weight: 927, isHappy: true } ] } }, computed: { happyAlligators: filter('alligators', 'isHappy', true), // It's easy to build chains! numberOfHappy: count(happyAlligators) } } </script>
利用可能なヘルパーの完全なリストについては、メインリポジトリを参照してください。
ほとんどの場合、ほとんどのユースケースは組み込みのJS配列関数で処理できますが、これらのいくつかは役立つ場合があります。 楽しみ!