実現したい事

データのカテゴリーが同じものだけをリストに表示させて表示したいのですが、
下記のコードだと表示されなず、質問させて頂きました。
ご存知の方いらっしゃいましたらご教示頂けると幸いです。

html
1<div id="dynamic-component-demo">
2  <div v-if="categroy == 'メンズ'">
3    <div class="posts-tab">
4      <ul class="posts-sidebar">
5        <li v-for="(post, index) in posts" v-bind:key="post.id" v-on:click="selectedNumber = index">
6          {{ post.title }}
7        </li>
8      </ul>
9      <div class="selected-post-container">
10        <div class="selected-post">
11          <h3>{{ selectedPost.title }}</h3>
12          <div v-html="selectedPost.content"></div>
13        </div>
14      </div>
15    </div>
16  </div>
17  <div v-if="categroy == 'レディース'">
18    <div class="posts-tab">
19      <ul class="posts-sidebar">
20        <li v-for="(post, index) in posts" v-bind:key="post.id" v-on:click="selectedNumber = index">
21          {{ post.title }}
22        </li>
23      </ul>
24      <div class="selected-post-container">
25        <div class="selected-post">
26          <h3>{{ selectedPost.title }}</h3>
27          <div v-html="selectedPost.content"></div>
28        </div>
29      </div>
30    </div>
31  </div>
32</div>

vue
1new Vue({
2  el: '#dynamic-component-demo',
3  data: {
4    posts: [{
5      id: 1,
6      title: 'タイトル1',
7      content: '<p>本文1</p>',
8      category: 'メンズ'
9    }, {
10      id: 2,
11      title: 'タイトル2',
12      content: '<p>本文2</p>',
13      category: 'メンズ'
14    }, {
15      id: 3,
16      title: 'タイトル3',
17      content: '<p>本文3</p>',
18      category: 'レディース'
19    }, {
20      id: 4,
21      title: 'タイトル4',
22      content: '<p>本文4</p>',
23      category: 'メンズ'
24    }],
25    selectedNumber: 0
26  },
27  computed: {
28    selectedPost() {
29      return this.posts[this.selectedNumber]
30    }
31  }
32})

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

回答1件

ベストアンサー

postsの要素の中にcategoryがメンズのものが1つでもあれば？
的な意味でしょうか

javascript
1  <div v-if="posts.filter(x=>x.category=='メンズ').length>0">

sample

メンズにタイトル1,2,4、レディースに3を表示するのはイメージがつくのですが
その他の項目はどうなればいいのでしょうか？
結果をHTMLに書き起こしてもらい、仕様説明をしてもらえると書きようもあるかと

javascript
1<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2<div id="dynamic-component-demo">
3  <div v-if="posts.filter(x=>x.category=='メンズ').length>0">
4    <div class="posts-tab">
5      <ul class="posts-sidebar">
6        <li v-for="(post, index) in posts.filter(x=>x.category=='メンズ')" v-bind:key="post.id" v-on:click="selectedNumber = index">
7          {{ post.title }}
8        </li>
9      </ul>
10      <div class="selected-post-container">
11        <div class="selected-post">
12          <h3>{{ selectedPost.title }}</h3>
13          <div v-html="selectedPost.content"></div>
14        </div>
15      </div>
16    </div>
17  </div>
18  <div v-if="posts.filter(x=>x.category=='レディース').length>0">
19    <div class="posts-tab">
20      <ul class="posts-sidebar">
21        <li v-for="(post, index) in posts.filter(x=>x.category=='レディース')" v-bind:key="post.id" v-on:click="selectedNumber = index">
22          {{ post.title }}
23        </li>
24      </ul>
25      <div class="selected-post-container">
26        <div class="selected-post">
27          <h3>{{ selectedPost.title }}</h3>
28          <div v-html="selectedPost.content"></div>
29        </div>
30      </div>
31    </div>
32  </div>
33</div>
34<script>
35new Vue({
36  el: '#dynamic-component-demo',
37  data: {
38    posts: [{
39      id: 1,
40      title: 'タイトル1',
41      content: '<p>本文1</p>',
42      category: 'メンズ'
43    }, {
44      id: 2,
45      title: 'タイトル2',
46      content: '<p>本文2</p>',
47      category: 'メンズ'
48    }, {
49      id: 3,
50      title: 'タイトル3',
51      content: '<p>本文3</p>',
52      category: 'レディース'
53    }, {
54      id: 4,
55      title: 'タイトル4',
56      content: '<p>本文4</p>',
57      category: 'メンズ'
58    }],
59    selectedNumber: 0
60  },
61  computed: {
62    selectedPost() {
63      return this.posts[this.selectedNumber]
64    }
65  }
66});
67</script>

調整版

javascript
1<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2<div id="dynamic-component-demo">
3  <div v-if="posts.filter(x=>x.category=='メンズ').length>0">
4    <div class="posts-tab">
5      <ul class="posts-sidebar">
6        <li v-for="(post, index) in posts.filter(x=>x.category=='メンズ')" v-bind:key="post.id" v-on:click="selectedNumber = post.id-1">
7          {{ post.title }}
8        </li>
9      </ul>
10      <div class="selected-post-container">
11        <div class="selected-post">
12          <h3>{{ selectedPost.title }}</h3>
13          <div v-html="selectedPost.content"></div>
14        </div>
15      </div>
16    </div>
17  </div>
18  <div v-if="posts.filter(x=>x.category=='レディース').length>0">
19    <div class="posts-tab">
20      <ul class="posts-sidebar">
21        <li v-for="(post, index) in posts.filter(x=>x.category=='レディース')" v-bind:key="post.id" v-on:click="selectedNumber = post.id-1">
22          {{ post.title }}
23        </li>
24      </ul>
25      <div class="selected-post-container">
26        <div class="selected-post">
27          <h3>{{ selectedPost.title }}</h3>
28          <div v-html="selectedPost.content"></div>
29        </div>
30      </div>
31    </div>
32  </div>
33</div>
34<script>
35new Vue({
36  el: '#dynamic-component-demo',
37  data: {
38    posts: [{
39      id: 1,
40      title: 'タイトル1',
41      content: '<p>本文1</p>',
42      category: 'メンズ'
43    }, {
44      id: 2,
45      title: 'タイトル2',
46      content: '<p>本文2</p>',
47      category: 'メンズ'
48    }, {
49      id: 3,
50      title: 'タイトル3',
51      content: '<p>本文3</p>',
52      category: 'レディース'
53    }, {
54      id: 4,
55      title: 'タイトル4',
56      content: '<p>本文4</p>',
57      category: 'メンズ'
58    }],
59    selectedNumber: 0
60  },
61  computed: {
62    selectedPost() {
63      return this.posts[this.selectedNumber]
64    }
65  }
66});
67</script>

投稿2019/12/12 04:06

編集2019/12/12 09:49

yambejp

総合スコア116694

kimisuke553

2019/12/12 04:50

早速のご回答有難うございます。内容が不足しておりすみません。細かく概要をお伝えしますと、 /mens /women という形でページ遷移をして、 /mensの時にcategoryがメンズのときはメンズのみ一覧で表示して、 /womenの時にcategoryがレディースのときはレディースのみ一覧で表示したいです。

kimisuke553

2019/12/12 07:14

だいぶ理想に近づきました！有難うございます！ <li v-for="(post, index) in posts.filter(x=>x.category=='メンズ')" v-bind:key="post.id" v-on:click="selectedNumber = index"> {{ post.title }} </li> こちらは問題なくカテゴリーがメンズのものだけが表示されましたが、リストをクリックした際に表示させる箇所が絞られておらず、レディースのものが表示されてしまいました。 indexが影響しているのでしょうか？下記のURLで表示確認しています。何度もすみません。 https://jsfiddle.net/kimisuke553/r293evd8/7/