【vue.js】dataの動的な切り替え

やりたいこと
vue.jsでmethodを走らせた際に、dataの中身を動的に切り替えること。

下記のファイル内で、
セリーグ、パリーグの項目をクリックすると、
選手一覧が変更されるようにしたいと考えています。

isSelectのmethod自体は走り、dataListに引数として設定している(batp2005)が
紐づけられていることは確認できたのですが、
batp2005が未定義ですというエラーが発生してしまいます。

batp2005自体は「/json/batp2005.json.js」内で定義しており、
それをvar dataList_p = batp2005;で変数に格納しているため
表示される認識だったのですが、、

dataの中身を動的に切り替えるには、どのような記述が適切なのでしょうか?
ご教授いただけると幸いです。

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3
4
5<head>
6<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
7<script th:src="@{/json/batc2005.json.js}"></script>
8<script th:src="@{/json/batp2005.json.js}"></script>
9
10<meta charset="UTF-8"/>
11</head>
12<body>
13<h3>選手一覧</h3>
14
15
16<div id="app">
17<div id="tab">
18    <ul class="tabMenu">
19        <li @click="isSelect(batc2005)">セリーグ</li>
20        <li @click="isSelect(batp2005)">パリーグ</li>
21    </ul>
22</div>
23  <table class="vue_tbl">
24    <thead>
25      <tr>
26        <th>項番</th>
27        <th>選手名称 <span style="font-size: 12px"></span></th>
28      </tr>
29    </thead>
30    <tbody>
31      <tr v-for="(item, index) in items">
32        <td>{{ index + 1 }}</td>
33        <td>{{ item.player }}</td>   
34      </tr>
35    </tbody>
36  </table>
37</div>
38
39	
40<script>
41var dataList_p = batp2005;
42var dataList_c = batc2005;
43var app = new Vue({
44  el: '#app',
45  data() {	
46    return {
47    items:dataList_c
48    }
49  },
50  methods: {
51        isSelect: function (dataList) {
52            this.items = dataList;
53        }
54    }
55})
56
57</script>
58</body>
59
60</html>
61
62

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

回答1件

ベストアンサー

多分だけどhtml内でvueの記法で書いているから

html
1    <ul class="tabMenu">
2        <li @click="isSelect(batc2005)">セリーグ</li>
3        <li @click="isSelect(batp2005)">パリーグ</li>
4    </ul>

vue内にbatc2005が見えないといけないけど設定されていない

javascript
1var dataList_p = batp2005;
2var dataList_c = batc2005;

とりあえずvueの中にいれたら？

javascript
1var app = new Vue({
2  el: '#app',
3  data() {    
4    return {
5    items:batc2005,
6    batp2005 : batp2005,
7    batc2005 : batc2005
8    }
9  },
10  methods: {
11        isSelect: function (dataList) {
12            this.items = dataList;
13        }
14    }
15})