items配列の各要素にshowを持たせればよいと思います。
現状showがひとつしかないので、items配列の何番目がclickされたのを判定せずに全部展開してしまっている状態ですね。
v-forからindexを取得して、clickイベントにindexを渡せば、items配列の特定の要素だけを開閉できるようになります。
nuxt
1<template>
2 <div>
3 <b-table-simple class="card">
4 <b-thead>
5 <b-tr>
6 <b-th v-for="field in fields" :key="field.key">{{ field.label }}</b-th>
7 </b-tr>
8 </b-thead>
9 <b-tbody v-for="(item, index) in items" :key="item.sample1">
10 <b-tr @click="click(index)">
11 <b-td>{{ item.sample1 }}</b-td>
12 <b-td>{{ item.sample2 }}</b-td>
13 <b-td>{{ item.sample3 }}</b-td>
14 </b-tr>
15 <b-tr v-show="item.show" v-for="subItem in item.subItems" :key="subItem.sample1">
16 <b-td>{{ subItem.sample1 }}</b-td>
17 <b-td>{{ subItem.sample2 }}</b-td>
18 <b-td>{{ subItem.sample3 }}</b-td>
19 </b-tr>
20 </b-tbody>
21 </b-table-simple>
22 </div>
23</template>
24
25<script>
26export default {
27 data () {
28 return {
29 fields: [
30 {key: 'sample1', label: 'サンプルタイトル1'},
31 {key: 'sample2', label: 'サンプルタイトル2'},
32 {key: 'sample3', label: 'サンプルタイトル3'},
33 ],
34 items: [
35 {
36 show : false,
37 sample1: 'サンプル1',
38 sample2: 'サンプル2',
39 sample3: 'サンプル3',
40 subItems: [
41 {
42 sample1: 'サンプル1',
43 sample2: 'サンプル2',
44 sample3: 'サンプル3',
45 },
46 {
47 sample1: 'サンプル1',
48 sample2: 'サンプル2',
49 sample3: 'サンプル3',
50 },
51 ]
52 },
53 {
54 show : false,
55 sample1: 'サンプル1',
56 sample2: 'サンプル2',
57 sample3: 'サンプル3',
58 subItems: [
59 {
60 sample1: 'サンプル1',
61 sample2: 'サンプル2',
62 sample3: 'サンプル3',
63 },
64 {
65 sample1: 'サンプル1',
66 sample2: 'サンプル2',
67 sample3: 'サンプル3',
68 },
69 ]
70 }
71 ],
72 }
73 },
74 methods: {
75 click(index) {
76 this.items[index].show = !this.items[index].show
77 }
78 }
79}
80</script>
あと今回の質問とは関係ないですが、ブラウザの開発者モードで確認すると
[Vue warn]: Duplicate keys detected: 'サンプル1'.
というエラーがでています。
サンプルコードだとは思いますが、一応:keyには一意になる値が必ずくるように実装するのをお忘れなく。
追記
Vue.jsについては詳しくないので、気になって:keyについて調べてみました。
https://qrunch.net/@rokujiro/entries/wkreYi4Opa4Wa3iU
上記の説明によるとなるべく配列の中に一意の値をもつプロパティを持たせたほうがいいようですね。
そうなると、clickイベントでindexを渡すよりも、要素のkeyになるプロパティを渡して、
それに一致すつ配列の要素を探してshowを切り替えたほうがいいみたいですね。
nuxt
1<template>
2 <div>
3 <b-table-simple class="card">
4 <b-thead>
5 <b-tr>
6 <b-th v-for="field in fields" :key="field.key">{{ field.label }}</b-th>
7 </b-tr>
8 </b-thead>
9 <b-tbody v-for="item in items" :key="item.id">
10 <b-tr @click="click(item.id)">
11 <b-td>{{ item.sample1 }}</b-td>
12 <b-td>{{ item.sample2 }}</b-td>
13 <b-td>{{ item.sample3 }}</b-td>
14 </b-tr>
15 <b-tr v-show="item.show" v-for="subItem in item.subItems" :key="subItem.id">
16 <b-td>{{ subItem.sample1 }}</b-td>
17 <b-td>{{ subItem.sample2 }}</b-td>
18 <b-td>{{ subItem.sample3 }}</b-td>
19 </b-tr>
20 </b-tbody>
21 </b-table-simple>
22 </div>
23</template>
24
25<script>
26export default {
27 data () {
28 return {
29 fields: [
30 {key: 'sample1', label: 'サンプルタイトル1'},
31 {key: 'sample2', label: 'サンプルタイトル2'},
32 {key: 'sample3', label: 'サンプルタイトル3'},
33 ],
34 items: [
35 {
36 id: 1123,
37 show : false,
38 sample1: 'サンプル1',
39 sample2: 'サンプル2',
40 sample3: 'サンプル3',
41 subItems: [
42 {
43 id: 1,
44 sample1: 'サンプル1',
45 sample2: 'サンプル2',
46 sample3: 'サンプル3',
47 },
48 {
49 id: 2,
50 sample1: 'サンプル1',
51 sample2: 'サンプル2',
52 sample3: 'サンプル3',
53 },
54 ]
55 },
56 {
57 id: 1124,
58 show : false,
59 sample1: 'サンプル1',
60 sample2: 'サンプル2',
61 sample3: 'サンプル3',
62 subItems: [
63 {
64 id: 1,
65 sample1: 'サンプル1',
66 sample2: 'サンプル2',
67 sample3: 'サンプル3',
68 },
69 {
70 id: 2,
71 sample1: 'サンプル1',
72 sample2: 'サンプル2',
73 sample3: 'サンプル3',
74 },
75 ]
76 }
77 ],
78 }
79 },
80 methods: {
81 click(id) {
82 this.items.forEach(item => {
83 if (item.id == id) item.show = !item.show
84 })
85 }
86 }
87}
88</script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/03/07 14:10