Фильтры и миксины VueJS

Создание простых фильтров

Разберем создание простых фильтров на примерах:

Фильтр "lowercase" зарегистрирован локально.

App.vue

<template>
  <div>
    <h2>{{ title }}</h2>
    <h2>{{ title | lowercase }}</h2>
    <h2>{{ title | uppercase }}</h2>
    <h2>{{ title | uppercase | lowercase }}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue"
    }
  },
  filters: {
    lowercase(value) {
      return value.toLowerCase()
    }
  }
}
</script>

<style></style>

Фильтр "uppercase" зарегистрирован глобально.

main.js

/* jshint ignore:start */
import Vue from "vue"
import App from "./App.vue"

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

new Vue({
  el: "#app",
  render: h => h(App)
})

Фильтрация списков

Пример написания фильтрации списков так же рассмотрим на примере.

main.js

/* jshint ignore:start */
import Vue from "vue"
import App from "./App.vue"

new Vue({
  el: "#app",
  render: h => h(App)
})

App.vue

<template>
  <div>
    <h2>{{ title }}</h2>

    <input v-model="inputText">

    <ul>
      <li v-for="name of filteredNames">{{ name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue",
      inputText: "",
      names: ["Vlad", "Elena", "Max", "Igor"]
    }
  },
  computed: {
    filteredNames() {
      return this.names.filter(name => {
        return name.indexOf(this.inputText) !== -1
      })
    }
  }
}
</script>

<style></style>

Этот поиск чувствителен к регистру букв, что бы избавиться от этого внесем в код небольшие коррективы.

Изменения

  computed: {
    filteredNames() {
      return this.names.filter(name => {
        return name.toLowerCase().indexOf(this.inputText.toLowerCase()) !== -1
      })
    }

Использование миксинов

Миксины позволяют избавится от дублирования кода и логики в двух разных компонентах. 

Как их использовать рассмотрим на примере. Есть два компонента, имеющих одинаковый список и функцию выборки из списка.

main.js

/* jshint ignore:start */
import Vue from "vue"
import App from "./App.vue"
import List from "./List"

Vue.component("app-list", List)

new Vue({
  el: "#app",
  render: h => h(App)
})

Vue.js

<template>
  <div>
    <h2>{{ title }}</h2>

    <input v-model="inputText">

    <ul>
      <li v-for="name of filteredNames">{{ name }}</li>
    </ul>

    <hr>

    <app-list></app-list>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue",
      inputText: "",
      names: ["Vlad", "Elena", "Max", "Igor"]
    }
  },
  computed: {
    filteredNames() {
      return this.names.filter(name => {
        return name.toLowerCase().indexOf(this.inputText.toLowerCase()) !== -1
      })
    }
  }
}
</script>

<style></style>

List.js

<template>
  <div>
    <input v-model="inputText">

    <ul>
      <li v-for="name of filteredNames">{{ name }}</li>
    </ul>
  </div>
</template>



<script>
export default {
  data () {
    return {
      title: "Hello I am Vue",
      inputText: "",
      names: ["Vlad", "Elena", "Max", "Igor"]
    }
  },
  computed: {
    filteredNames() {
      return this.names.filter(name => {
        return name.toLowerCase().indexOf(this.inputText.toLowerCase()) !== -1
      })
    }
  }
}
</script>



<style></style>

Теперь переделаем это все на миксины.

main.js

import Vue from "vue"
import App from "./App.vue"
import List from "./List"

Vue.component("app-list", List)

new Vue({
  el: "#app",
  render: h => h(App)
})

listMixin.js

/* jshint ignore:start */
export default {
  data () {
    return {
      title: "Hello I am Vue",
      inputText: "",
      names: ["Vlad", "Elena", "Max", "Igor"]
    }
  },
  computed: {
    filteredNames() {
      return this.names.filter(name => {
        return name.toLowerCase().indexOf(this.inputText.toLowerCase()) !== -1
      })
    }
  }
}

App.vue

<template>
  <div>
    <h2>{{ title }}</h2>

    <input v-model="inputText">

    <ul>
      <li v-for="name of filteredNames">{{ name }}</li>
    </ul>

    <hr>

    <app-list></app-list>
  </div>
</template>

<script>
  import ListMixin from "./listMixin"

  export default {
    mixins: [ListMixin]
  }</script>

<style></style>

List.vue

<template>
  <div>
    <input v-model="inputText">

    <ul>
      <li v-for="name of filteredNames">{{ name }}</li>
    </ul>
  </div>
</template>



<script>
  import ListMixin from "./listMixin"

  export default {
    mixins: [ListMixin]
  }</script>



<style></style>