从 Vue.js3 中的 JSON 获取数据的动态相关下拉列表

Question

我有这种情况：我必须在 Vuejs 中使用来自 JSON 的数据制作 4 个下拉框。前 2 个下拉框用于在锦标赛中的球队列表中进行选择以相互竞争，然后有 2 个其他下拉选择框：一个用于选择先前在下拉框 1 和 2 中选择的两支球队之一，最后一个选择在3号选择框中选择的球队的一名球员，这意味着4号下拉框依赖于3号下拉框，3号下拉框依赖于1号和2号下拉框。

为了识别哪些球员属于哪个球队，我使用了一个与球队匹配的球队 ID，就像 SQL 外键一样，而不是在每个球队列表中制作球员列表。 json基本上是这样的：

数据.json

{
  "teams": [
    {
      "id": 1,
      "name": "Team 1",
      "city": "Los Angeles",
    },
    {
      "id": 2,
      "name": "Team 2",
      "city": "Brussels",
    },
    {
      "id": 3,
      "name": "Team 3",
      "city": "London",
    }
  ],
  "players": [
    {
      "id": 1,
      "name": "John",
      "team_id": "3"
    },
    {
      "id": 2,
      "name": "Larry",
      "team_id": "3"
    },
    {
      "id": 3,
      "name": "Peter",
      "team_id": "1"
    },
    {
      "id": 4,
      "name": "Matt",
      "team_id": "2"
    }
  ],
}

此外，这个 JSON 不是静态的，因为有一个完整的 CRUD 应用程序可以插入、编辑和删除球队和球员。

我的问题是我不知道如何制作这些依赖选择框。到目前为止，我想我设法提取了前 2 个选择的团队名称列表，但我不知道如何才能使第 3 个选择只使用先前选择的 2 个作为选项，第 4 个选择框都没有在选择框 3 中选择的球队的球员。

这是我目前所拥有的：

<template>
  <h3>Matches</h3>

  <label class="form-label">House Team:</label>
  <select class="form-control">
    <option v-for="(team, index) in teams" :key="index">
      {{ team.name }}
    </option>
  </select>
  <label class="form-label">Visitor Team:</label>
  <select class="form-control">
    <option v-for="(team, index) in teams" :key="index">
      {{ team.name }}
    </option>
  </select>


  <h4>Points</h4>


   <div class="row">
    <div class="column">
      <div>Team</div>
      <select v-model="point.team">
        <option v-for="team in teams" :key="team">
          {{ team.name }}
        </option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="column">
      <div>Player</div>
      <select v-model="point.player">
        <option 
          v-for="player in filtered_team" 
          :key="player"
        >
          {{ player.name }}
        </option>
      </select>
    </div>
  </div>

  <button @click="savePoint" type="button" class="btn btn-primary">Score Point</button>

</template>

<script>
import json from '../fakeAPI/data.json'
import axios from "axios";

let newTeam = (max) => {
  let max_id = max || 0
  return{
        'id': max_id + 1,
        'name': "",
        'city': "",
      }
}

let newPlayer = (team_id,max) => {
  let max_id = max || 0
  return{
        'id': max_id + 1,
        'name': "",
        'team_id': team_id,
      }
}

let scorePoint = (max) => {
  let max_id = max || 0
  return{
        'id': max_id + 1,
        'team': "",
        'player': "",
      }
}

const URL_points = 'http://localhost:3000/points';
const URL_teams = 'http://localhost:3000/teams';
const URL_players = 'http://localhost:3000/players';

export default {
  name: 'Matches',
  components: {
    },
  data(){
    return{
      point: scorePoint(),
      matches: [],
      points: [],
      teams: [],
      players: [],
      team: '',
      player: '',
      listTeams: json.teams,
    }
  },
  computed: {
      filtered_team(){
          return this.players.filter(p => p.team_id === this.team.id)
      }
  },
  mounted() {
    axios.get(URL_points).then(({data}) => {
      this.points = data
      this.point = scorePoint(Math.max(...this.points.map(p => p.id)))
    })
    axios.get(URL_teams).then(({data}) => {
      this.teams = data
      this.team = newTeam(Math.max(...this.teams.map(t => t.id)))
    })
    axios.get(URL_players).then(({data}) => {
      this.players = data
      this.player = newPlayer({params: {team_id: this.team.id}}, Math.max(...this.players.map(x => x.id)));
    })

  }
}
</script>

Answer 1

您必须绑定模型框 1 和 2，然后在框 3 上发出更改事件，该事件将调用带有参数值框 1 和 2 的 api