Currently, I am tackling a Vue.js 3 school assignment that involves a dynamic number of teams competing in a football championship. The team data is stored in a JSON format and accessed via an API. The task at hand requires selecting two teams - one representing the home team and the other the visitor team - to compete against each other. The goal is to award a point to one of these teams and update the scoreboard accordingly. The points are managed using Vuex within a store. However, I am facing challenges with ensuring that the points are allocated correctly to each team. I have attempted to use an if-else structure, but it is giving points to both teams simultaneously. I am struggling with passing the parameters accurately and would greatly appreciate any guidance on this issue.
Here is my current code:
store.js
import {createStore} from 'vuex'
import axios from 'axios'
const store = createStore({
state() {
return {
teams: [],
house_points: 0,
visitor_poins: 0,
}
},
getters: {
total_house: state => state.house_points,
total_visitor: state => state.visitor_poins
},
mutations: {
load_team(state, teams){
state.teams = teams
},
count_house_points (state) {
state.house_points++
},
count_visitor_points (state) {
state.visitor_poins++
},
},
actions: {
load({commit}) {
axios.get('http://localhost:3000/teams').then(({data}) => {
commit('load_team', data)
})
},
count_house_points ({commit}) {
commit('count_house_points')
axios.get('http://localhost:3000/points').then(({data}) => {
commit('count_house_points', data)
})
},
count_visitor_points ({commit}) {
commit('count_visitor_points')
axios.get('http://localhost:3000/points').then(({data}) => {
commit('count_visitor_points', data)
})
},
}
})
The application: