Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Vue.js の slot を使用して並べ替えと絞り込みを行う (v2.5 以前で v2.6 からは deprecated になりそう)

More than 1 year has passed since last update.

slot を使用しての並べ替えと絞り込み

実装例
上記において { pref } の値によるまとまりの並べ替えと
内容となる list 自体の反転を行っています。

props の指定により name を変更する slot

list の並べ替えに使用するコンポーネントとなります。

  • 子コンポーネント自体には表示対象となる list を持たせません。
  • slotname の指定に props からの関数を使用させます。
  • slot を並べ替える基となる sortListprops として渡します。
DynamicSlot
<template>
  <div>dynamic
    <slot v-for="(row, key) in sortList" :name="slotName(row, key)">
      <!-- slot タグには :key 指定ができない模様 -->
      <span :key="slotName(row, key)"></span>
    </slot>
  </div>
</template>

<script>
import Vue from "vue";
export default Vue.extend({
  props: {
    sortList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    slotName: {
      type: Function,
      default: (row, key) => `dynamic-${key}`
    }
  }
});
</script>

slot による並べ替えコンポーネントの使用

以下の実装をしています。

  • 表示データとなる listpref を並べ替える根拠となる sortListdata に指定
  • 前述の slotname を指定するための slotNamemethods
  • 配列操作として list sortList の反転操作、各要素ごとの pref へのインクリメント
    • prefsortList に含まれない値になった時点で表示対象より除外されます。
App.vue
<template>
  <div id="app">
    <button @click="sortList = sortList.reverse()">pref</button>
    <button @click="list = list.reverse()">list reverse</button>
    <DynamicSlot :sort-list="sortList" :slot-name="slotName">
      <p v-for="(row, key) in list" :key="key" :slot="slotName(row, key)">
        {{ row }}
        <button @click="list[key].pref = list[key].pref + 1">pref increment</button>
      </p>
    </DynamicSlot>
  </div>
</template>

<script>
import DynamicSlot from "./components/DynamicSlot";

export default {
  components: {
    DynamicSlot
  },
  data() {
    return {
      sortList: [{ pref: 2 }, { pref: 3 }, { pref: 1 }],
      list: [
        { id: 1, name: "aaa", pref: 1 },
        { id: 2, name: "bbb", pref: 2 },
        { id: 3, name: "ccc", pref: 1 },
        { id: 4, name: "ddd", pref: 3 },
        { id: 5, name: "eee", pref: 2 },
        { id: 6, name: "fff", pref: 1 },
        { id: 7, name: "ggg", pref: 1 },
        { id: 8, name: "hhh", pref: 3 },
        { id: 9, name: "iii", pref: 3 },
        { id: 10, name: "jjj", pref: 1 }
      ]
    };
  },
  methods: {
    slotName(row, key) {
      return `dynamic-${row.pref}`;
    }
  }
};
</script>

pref の値を基に slotName の結果が変更されますが、
sortList の反転により並び変わるのは こちらの挙動 を利用しており
バグっぽいような感じもしなくもないです・・・。

ysKuga
いつもの vagrant のおっさん
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away