【Vue.js】絞り込み検索

■やりたいこと
検索フォームから年度とリーグを設定し、
検索ボタンをクリック後に該当年の選手一覧を表示すること。

下記のHTMLにて、
<label id="leag">と<form id="selectDate">で設定した、
リーグと年度を元に、呼び出すjsonファイルを変更し、画面を動的に更新したいと考えています。

■確認できたこと
パリーグ、2005年を選択して
検索ボタンをクリックしたところ、
showPlayersのファンクション内で変数strに"batp2005"と期待している値を埋め込むことはできたのですが、
文字列として認識されているため、jsonで定義しているbatp2005を見に行かず、
空のdataが返却されてしまいます。
(*上記ファンクション内で、app.items=batp2005と直書きした場合、想定通りの挙動になったため、
ダブルクォーテーションで囲んであることが問題と認識しています。)

■改めてお聞きしたいこと
上記のstrを文字列として認識せず、正常に検索処理が行われるために改修すべき点、
または、検索フォームの実装において、別の案がありましたらご教授いただけると幸いです。

初心者な質問で申し訳ございませんが、
よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3
4
5<head>
6<link rel="stylesheet" href="css/player.css">
7<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
8<script th:src="@{/js/jquery-3.6.0.min.js}"></script>
9<script th:src="@{/json/batc2005.json.js}"></script>
10<script th:src="@{/json/batp2005.json.js}"></script>
11
12<meta charset="UTF-8"/>
13</head>
14<body>
15<h3>選手一覧</h3>
16
17<div>
18<label id="leag">
19  <label><input type="radio" v-model="value" value=batc>セリーグ</label>
20  <label><input type="radio" v-model="value" value=batp>パリーグ</label>
21</label>
22
23<form id="selectDate">
24  <select v-model="selected">
25    <option v-for="(year,index) in list" :key="index":value=year>
26      {{ year }}
27    </option>
28  </select>年
29</form>
30</div>
31<button id="showButton" v-on:click="showPlayers()">検索</button>
32
33<div id="app">
34  <table class="vue_tbl">
35    <thead>
36      <tr id="table_head">
37        <th>項番</th>
38        <th class="player">選手 <span style="font-size: 12px ;width:100%"></span></th>
39      </tr>
40    </thead>
41    <tbody>
42      <tr v-for="(item, index) in items">
43        <td>{{ index + 1 }}</td>
44        <td class="strEle">{{ item.player }} {{ item.team }}</td>     
45      </tr>
46    </tbody>
47  </table>
48</div>
49
50	
51<script>
52var app = new Vue({
53  el: '#app',
54  data() {	
55    return {
56    items:batc2005,
57    batp2005 : batp2005,
58    batc2005 : batc2005
59    }
60  },
61  methods: {
62    isSelect: function (dataList) {
63      this.items = dataList;
64    }
65  }
66})
67
68var leag = new Vue({
69  el: '#leag',
70  data: {
71    value: ''
72  }
73})
74var vm = new Vue({
75  el: '#selectDate',
76  data: {
77    selected: null,
78    list: [],
79    num:100
80  },
81  created(){
82	const year = new Date().getFullYear()
83	for(let i=0;i<=year-2005;i++){
84	  this.list.unshift(year- i)
85	}
86	this.selected=year
87  },
88})
89  
90var showButton = new Vue({
91  el: '#showButton',
92  methods:{
93  	showPlayers:function(){
94      var str = leag.value+vm.selected
95      app.items = str
96  	}
97  }
98});
99
100</script>
101</body>
102
103</html>

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

回答1件

ベストアンサー

ベストプラクティスかはわからないですが、最小限の変更で済ますならば

diff
1    var showButton = new Vue({
2      el: '#showButton',
3      methods: {
4        showPlayers: function () {
5          var str = leag.value + vm.selected
6-         app.items = str
7+         app.items = app[str]
8        }
9      }