tableでtd要素の中のradio checkedによって下のtr要素を表示・非表示に切り替えたい時

tableの入力画面で、例えばradioボタンの選択状況によって、下のtr要素の表示・非表示を変えたいとする

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table>
    <tr>
        <th>
            hpscript
        </th>
        <td>
            <input type="radio" name="a" value="y" checked>yes
            <input type="radio" name="a" value="n">no
        </td>
    </tr>
 
    <tr>
        <th>
            タイトル1
        </th>
        <td>
            コンテンツ1
        </td>
    </tr>
</table>

これをVue.jsのv-on:${}で実装しようとしたが、上手く行かない

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<table>
    <div id="app">
    <tr>
        <th>
            hpscript
        </th>
        <td>
            <input type="radio" name="a" v-on:change="handler" value="y" checked>yes
            <input type="radio" name="a" v-on:change="handler" value="n">no
        </td>
    </tr>
    <div v-if="show">
    <tr>
        <th>
            タイトル1
        </th>
        <td>
            コンテンツ1
        </td>
    </tr>
    </div>
    </div>
</table>
<script>
    new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handler: function(event){
                if(event.target.value === 'y'){
                    this.show = true
                } else {
                    this.show = false
                }
            }
        }
    })
</script>

ガッテム。結局、on.changeで実装することに。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<table>
    <tr>
        <th>
            hpscript
        </th>
        <td>
            <input type="radio" name="a" value="y" checked>yes
            <input type="radio" name="a" value="n">no
        </td>
    </tr>
 
    <tr class="changeterm displaynone">
        <th>
            タイトル1
        </th>
        <td>
            コンテンツ1
        </td>
    </tr>
</table>
 
<script>
$('input[name=a]').on('change', function(){
            if($('.changeterm').hasClass('displaynone')){
                $('.changeterm').removeClass('displaynone');
            } else {
                $('.changeterm').addClass('displaynone');
            }          
        });
</script>
1
2
3
.displaynone {
        display:none;
}

なんでtableでVue.jsのv-onだと上手く行かないのかよくわからない。。
教えて欲しい。。🤖