フィルター機能+ランダム配列の実装

やりたいこと
コンテンツの順序をランダムにし、それをフィルター機能で出しわけしたいです。

詳細
コンテンツの順序をランダムで入れ替える機能、フィルター機能の単体だと実装可能なのですが、
この二つを合わせると、フィルター機能の方がうまく動作しません。
→ランダムで表示されるが、フィルターが意図しているグループにいかない。
下記コードだと、カテゴリー1に3個、カテゴリー2に2個のコンテンツなのですが、カテゴリーごとの個数は合うのですが別カテゴリーのものが入ってしまいます。

コンテンツはvue.jsを使いjsonを呼び出しています。
こだわりはないので、コンテンツをランダム表示+フィルター機能の実装ができるのであればhtmlに記載でも問題ございません。

コンテンツの順序をランダムにするものと、フィルター機能のコードを別々で書いているのが問題なのかなとは思うのですが、何をなおせばいいかわからず。。。
どなたかご教示願えれば幸いです。
よろしくおねがいいたします。

HTML
1<body>
2  <div class="article">
3    <!-- フィルター機能 -->
4    <div class="filters article__filter">
5      <input type="radio" name="categories" id="All" value="All" checked>
6      <label for="All"> All </label>
7      <input type="radio" name="categories" id="category1" value="category1">
8      <label for="category1"> category1 </label>
9      <input type="radio" name="categories" id="category2" value="category2">
10      <label for="category2"> category2 </label>
11    </div>
12
13    <!-- ランダムで出したいコンテンツ -->
14    <div id="card-unit" class="article__lists">
15      <div class="article__list" v-for="Card in Cards" :data-category="Card.category">
16        <a class="card" :href="Card.link">
17          <ul class="details article__detail">
18            <li class="category">{{Card.category}}</li>
19            <li class="company">{{Card.name}}</li>
20          </ul>
21        </a>
22      </div>
23    </div>
24  </div>
25
26  <!-- jsonの呼び出し -->
27  <script>
28    var app = new Vue({
29      el: '#card-unit',
30      data: {
31        Cards: []
32      },
33      created: function () {
34        var self = this;
35        $.getJSON('card.js', function (data) {
36          self.Cards = data;
37        });
38      }
39    });
40  </script>
41</body>

json
1[
2    {
3        "category": "category1",
4        "name": "名前1"
5    },
6    {
7        "category": "category2",
8        "name": "名前2"
9    },
10    {
11        "category": "category1",
12        "name": "名前3"
13    },
14    {
15        "category": "category2",
16        "name": "名前4"
17    },
18    {
19        "category": "category1",
20        "name": "名前5"
21    }
22]

JavaScript
1// フィルター機能
2window.addEventListener('DOMContentLoaded', function () {
3  const input_categories = document.querySelectorAll("input[name=categories]");
4  const targets = document.querySelectorAll(".article__list");
5
6  for (let input_category of input_categories) {
7    input_category.addEventListener('change', function () {
8      for (let target of targets) {
9        target.style.setProperty('display', 'block');
10      }
11      if (this.checked) {
12        if (this.value !== 'All') {
13          const not_checked_categories = document.querySelectorAll('.article__list:not([data-category~=' + '"' + this.value + '"])');
14          for (let not_checked_category of not_checked_categories) {
15            not_checked_category.style.setProperty('display', 'none');
16          }
17        }
18      }
19    });
20  }
21});
22
23// ランダム配列
24$(function () {
25  var randomContent = [];
26  $('.card').each(function () {
27    randomContent.push($(this).html());
28  });
29  randomContent.sort(function () {
30    return Math.random() - Math.random();
31  });
32  $('.card').empty();
33  i = 0;
34  $('.card').each(function () {
35    $(this).append(randomContent[i]);
36    i++;
37  });
38});

行動規範の内容に同意します

回答1件

ベストアンサー

vue.jsで制御している内容をDOM操作で書き換えてはいけません。
表示元となるデータを変えるようにしましょう。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
6<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
7</head>
8<body>
9  <div id="vue-container" class="article">
10    <!-- フィルター機能 -->
11    <div class="filters article__filter">
12      <input type="radio" name="categories" id="All" value="All" checked v-model="filter">
13      <label for="All"> All </label>
14      <input type="radio" name="categories" id="category1" value="category1" v-model="filter">
15      <label for="category1"> category1 </label>
16      <input type="radio" name="categories" id="category2" value="category2" v-model="filter">
17      <label for="category2"> category2 </label>
18    </div>
19
20    <!-- ランダムで出したいコンテンツ -->
21    <div id="card-unit" class="article__lists">
22      <div class="article__list" v-for="Card in FilterdCards" :data-category="Card.category">
23        <a class="card" :href="Card.link">
24          <ul class="details article__detail">
25            <li class="category">{{Card.category}}</li>
26            <li class="company">{{Card.name}}</li>
27          </ul>
28        </a>
29      </div>
30    </div>
31  </div>
32
33  <!-- jsonの呼び出し -->
34  <script>
35    var app = new Vue({
36      el: '#vue-container',
37      data: {
38        filter: "All",
39        Cards: []
40      },
41      created: function () {
42        var self = this;
43        $.getJSON('card.js', function (data) {
44          var sortedData = data.sort(() => Math.random() - 0.5);
45          self.Cards = sortedData;
46        });
47      },
48      computed: {
49        FilterdCards: function() {
50          if (this.filter == "All") { return this.Cards; }
51          return this.Cards.filter(i => i.category == this.filter);
52        },
53      },
54    });
55  </script>
56</body>
57</html>

投稿2022/07/01 08:32

編集2022/07/02 11:57

ku__ra__ge

総合スコア4524

ku__ra__ge

2022/07/02 01:41 編集

本筋とは関係ないですが、sortメソッドに乱数を返す関数を渡して配列をシャッフルする方法は精度がよくないので、結果が偏ったなんちゃってシャッフルになります。ちゃんと並び順をランダムにしたい場合は、Fisher-Yatesシャッフルなどの正しいアルゴリズムを使いましょう。 https://qiita.com/shoheiyokoyama/items/4a49674f1e65671ea52b

hrnkmhmdmyk

2022/07/02 06:21

ご丁寧に教えてくださり、ありがとうございます！！ vue.jsは書き換えちゃダメだったんですね、、、。初歩的なことも知らずお手数をおかけいたしました。いただいた、htmlとcard.jsのみで試しているのですが、 card.jsを読み込めなくなってしまい、 {{Card.category}} {{Card.name}}　が表示されてしまいます。今回初めてVue.jsをいれてみてやっているので、何か初歩的なことを見逃しているのかと思うのですが、、、、。もしアドバイスあればいただけたら嬉しいです。お手数をおかけしまして申し訳ございません。

ku__ra__ge

2022/07/02 11:59 編集

失礼。コードのバグを修正しました。 https://teratail.com/questions/history-reply/cpk4kg1hrs6nkn javascripがうまく動かない場合、F12を押してコンソールを開くとエラーが確認できるのでそれをもとに修正を行うとよいです。

hrnkmhmdmyk

2022/07/03 07:41

ありがとうございます、、、！正直JavaScriptの基本もいまいち把握しきれてないままだったので改めて基本に戻ろうと思いました。こちらのコードは急ぎだったため本当にありがとうございました。お手数をおかけしまして申し訳ございませんでした。色々ご教示いただきありがとうございました！！

行動規範の内容に同意します