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

Insert a character or icon into a :value

Caution: Updating a component is not possible during the rendering of another component. ReactJS

Do I require two bot logins for discord.js?

Extracting data from an array using Angular

Search functionality that dynamically updates results as the user types, thanks

Surprising Media Component Found in URL Parameters within the design

Ways to extract innerHTML content from a loaded element generated by using the .load() method

Transferring data between various stages of the user interface

Is my React component being rendered twice?

Guide to authenticating Cashfree gateway's webhook signature using JavaScript

Show a modal component from another component in Angular 2

Using VueJS to create a dynamic inline template with a v-for loop

The documentation for Gridsome/Netlify CMS has a flaw that results in Graphql not functioning

utilizing the identical characteristics of the parent component

Navigate through content easily using the arrow keys on your keyboard with the help of Easy Slider

Tips for efficiently navigating to Vue methods, computeds, and data in VS Code!

Creating HTML form input fields for reading and writing an XML file

Violation of content security policy due to the usage of inline styling in the tawk.to

Create a stylish frame for designated rows within a table

Clicking on the child element triggers a blur event