Leverage the power of v-model props in your Vue 3 component to efficiently retrieve API breakpoints

Question

Leverage the power of v-model props in your Vue 3 component to efficiently retrieve API breakpoints

I am currently working on integrating the API breakpoints in my child component.
These components are designed for my football web application.
The breakpoints are sourced from: api-football

My challenge lies in passing multiple prop values into a component.
During debugging, I noticed that only the second prop (league) is being read in the parent component.

Encountered Errors:

If you have some spare time, feel free to provide a code review. I am currently learning Vue.

Teams.vue (parent):

<template>
  <main id="Home-page">
    <UserPanel/>

    <Transition name="bounce">
      <h1 v-if="headerShow" class="welcome-header">
        Team statistics
      </h1>
    </Transition>

    ...
 
      </div>
    </div>
  </main>
</template>

...
 
      })
    },
  },
  watch: {
    selectedLeague: function (value) {
      
      this.teams.length = 0;
    
          }
        }).catch(function (error) {
          console.error(error);
        });
    },
    selectedTeam: function (value) {
      console.log(value)
    }
  },
}
</script>

<style>
   /* styles go here */
</style>

TeamStatistics.vue (child):

<template>
  <div class="popup">

    ...

  }
}
</script>

<style scoped>
   /* styles go here */
</style>

Example response:


    let response = {
      "league": {
        "id": 39,
        "name": "Premier League",
        "country": "England",
        "logo": "https://media.api-sports.io/football/leagues/39.png",
        "flag": "https://media.api-sports.io/flags/gb.svg",
        "season": 2022
      },
      "team": {
        "id": 33,
        "name": "Manchester United",
        "logo": "https://media.api-sports.io/football/teams/33.png"
      },
      "form": "LLWWWWLWDWDWLW",
      ...

javascript vue.js vue-component vuejs3

Answer 1

Answer №1

To start, eliminate all instances of this in your templates.

How can I send multiple prop values to a component?

If you want to accomplish this dynamically, you can utilize v-bind, like so:

<MyComponent v-bind="componentProps"/>

componentProps() {
    return {
        propA:'foo',
        propB: 'bar'
        ...
    }
}

In this scenario, componentProps can be either a function or computed property where the returned object contains the props as keys.

Moreover,

document.getElementsByClassName('popup')[0].style.visibility = 'hidden';

Avoid doing that. Instead, use v-show with a variable. (docs)

In your TeamStatistics file, you have:

props: {
    data: {
      selectedLeague: String,
      selectedTeam: String
    }
  },

and you are applying v-model with the other props: selectedLeague andselectedTeam. Revise the props declaration in your TeamStatistics.vue like this:

props: ['selectedLeague', 'selectedTeam']

(props docs)

Then you should be able to correctly utilize v-model:selectedLeague. For two-way data binding (which v-model facilitates), you need to emit an event from your TeamStatistics.vue, such as:

$emit('update:selectedLeague',"some-value-here");
$emit('update:selectedTeam',"some-other-value-here");

Refer to this for further information.

Answer 2

To start, eliminate all instances of this in your templates.

How can I send multiple prop values to a component?

If you want to accomplish this dynamically, you can utilize v-bind, like so:

<MyComponent v-bind="componentProps"/>

componentProps() {
    return {
        propA:'foo',
        propB: 'bar'
        ...
    }
}

In this scenario, componentProps can be either a function or computed property where the returned object contains the props as keys.

Moreover,

document.getElementsByClassName('popup')[0].style.visibility = 'hidden';

Avoid doing that. Instead, use v-show with a variable. (docs)

In your TeamStatistics file, you have:

props: {
    data: {
      selectedLeague: String,
      selectedTeam: String
    }
  },

and you are applying v-model with the other props: selectedLeague andselectedTeam. Revise the props declaration in your TeamStatistics.vue like this:

props: ['selectedLeague', 'selectedTeam']

(props docs)

Then you should be able to correctly utilize v-model:selectedLeague. For two-way data binding (which v-model facilitates), you need to emit an event from your TeamStatistics.vue, such as:

$emit('update:selectedLeague',"some-value-here");
$emit('update:selectedTeam',"some-other-value-here");

Refer to this for further information.

Leverage the power of v-model props in your Vue 3 component to efficiently retrieve API breakpoints

Answer №1

Similar questions

Angular 14 troubleshooting: Issues with using getRawValue() in IndexOf function

Rewriting Next.js with custom headers

Refrain the output of a v-for loop in vueJS

Modifying form data when submitting a form

Booking.com's embedded content is experiencing display issues

Navigating through states in AngularJS

How to resolve the error "TypeError: 'listener' argument must be a function" in Gulpfile.js?

Interacting with the header component within the renderHeader property of the MUI Data Grid Pro will update the sortModel

Performing an axios request using form data in a React JS application

Looking to align the labels of material UI tabs to the left instead of their default center alignment? Here's how

Converting a file from a URL to a blob in PHP for use in JavaScript

Discovering the specific value from a fixture file in Cypress

Error: 'fs' module not found in React.js and cannot be resolved

Increase the options available in the dropdown menu by adding more selected items, without removing any already selected

Navigating through Index in #each in emberjs

I'm having trouble showing data from an API in my Vue.js application using v-for

Incorporate audio playback on image click using JavaScript, with the feature to automatically pause the playback if multiple images are playing simultaneously

Ways to reduce lag while executing a for loop

Changing letter cases in a textbox using Javascript

Enhancing Dataset Quality: Incorporating Failed Results with Apify