Tag: フィルター

[Nuxt.js]フィルターを作成する

Nuxtのファイル構成を意識したNuxt.jsでのフィルターの作成方法です。Vueのやり方だと上手く行かなかったため、備忘録。

グローバルフィルター

pluginsディレクトリ内にjsフォルダを作成し、どのページでもフィルタが読み込めるようにする方法です。今回は、数字を3桁ごとにカンマで区切るフィルタと、英語の文字列を全て大文字にするフィルタを作成します。

詳しく

まずはpagesディレクトリ内にfilter.vueの雛形を作成します。

<template>
  <div>
    <Header />
    <v-container>
      <!-- local filter -->
      <h2>Mustash</h2>
      <p>{{ price | numberFormat }}</p>
      <p>{{ text | toUpperCase }}</p>
      <h2>b-vind</h2>
      <input type="text" :value="price | numberFormat" />
      <input type="text" :value="text | toUpperCase" />
    </v-container>
  </div>
</template>


<script>
export default {
    data() {
      return {
        price: 25400,
        text: 'Hello, Nuxt.js!',
    }
  },
}
</script>
グローバルフィルターはpluginsディレクトリ内にjsフォルダを作成し、その中にフィルターの機能を記述します。
import Vue from 'vue'

Vue.filter('toUpperCase', (value) => {
  return value.toUpperCase()
})

Vue.filter('numberFormat', (value) => {
  return value.toLocaleString()
}

最後に、nuxt.config.jsにグローバルフィルタの場所を追記します。

export default {
  plugins: [ { src: '~plugins/filter.js' } ],
}

ローカルフィルター

ローカルフィルターは、pagesディレクトリ内の各ページに定義するそのページ限定のフィルターです。せっかくなので、次は長い文字列を短く表現し、省略した以降の文字は「…」と表現させる「引数あり」のフィルターを作成します。

長文
これを
こう

詳しく

まずは雛形を作成します。

<template>
  <div>
    <v-container>
      <p>{{ longText }}</p>
    </v-container>
  <Footer />
  </div>
</template>

<script>
export default {
  data() {
    return {
      longText:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    }
  },
}
</script>

この時点ではこれです。

フィルターを加えます。

<script>
export default {
  filters: {
    readMore: (text, length, suffix) => {
      return text.substring(0, length) + suffix
    },
  }

  data() {
 　　// 省略
}
</script>

readMoreの第一引数が適用する文字列、lengthが長さ、suffixが接尾辞です。

文字列textに対し.substringメソッドで0番目の文字から第二引数で渡した文字数（length）の、文字列の部分集合を返し、最後に指定したsuffixを加える、という処理が書かれています。

上記フィルターをlongTextに適用すると、コード全文は下記のようになります。

<template>
  <div>
    <v-container>
      <p>{{ longText | readMore(20, '...') }}</p> // フィルタを適用
    </v-container>
  <Footer />
  </div>
</template>

<script>
export default {
  filters: {
    readMore: (text, length, suffix) => {
      return text.substring(0, length) + suffix
    },
  }

  data() {
    return {
      longText:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
    }
  },
}
</script>

フィルターでは第三引数まで指定していたのに、textの引数は書かれていないことに注意してください。

 

フィルターはv-bind式でもできる

mustache構文を使わないでフィルターを適用させたい時もあるかと思います。2.1.0以降でサポート。

https://jp.vuejs.org/v2/guide/filters.html

<!-- mustaches -->
{{ message | capitalize }}

<!-- v-bind -->
<div v-bind:id="rawId | formatId"></div>

v-bind式の構文は、

<div v-bind:id=”フィルタに渡すデータ | フィルタ”></div>

です。

 

おしまい