Unhandled error during execution

[Ceagah2]

Vue version

3.3.4

Link to minimal reproduction

https://pokeapi.co/api/v2/pokemon

Steps to reproduce

Start a blank project running vue create [project-name] Create a simple home screen Fetch the pokemon data in this home (https://pokeapi.co/api/v2/pokemon)

Pass as props nameand url data to a component With this props in this component, create another, then pass the urlas props to another component. In this third component, try to render the pokemon data, like image and name, using the url passed as props.

the error says : [Vue warn]: Unhandled error during execution of render function Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core

What is expected?

Render 20 pokemon images and names.

What is actually happening?

throw this two errors and i can not retrieve the data.

[Vue warn]: Unhandled error during execution of render function Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core

System Info

System:
    OS: Linux 5.15 Linux Mint 21.2 (Victoria)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 5.14 GB / 11.47 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.20.1 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.8.1 - /usr/bin/npm
  Browsers:
    Brave Browser: 115.1.56.14

Any additional comments?

No response

[edison1105]

Please provide a runnable reproduction

[Ceagah2]

Sorry. You can run this project, and just open the console.

https://github.com/Ceagah2/vuejs-playground/tree/main/cli

[baiwusanyu-c]

I don't think this is a bug. Maybe you need to provide more information. In the repo you provided, when the data is not returned, accessing a non-existing attribute results in an error. I don't think it's Vue's problem that wrong coding causes vue to report errors and warnings 🤔

<template>
  <div class="pokemon">
    <img class="pokemonImg" :src="pokemonsData.sprites.back_shiny" alt="" />
    <span class="pokemonName">
      {{ pokemonsData.name }}
    </span>
  </div>
</template>

<script>
export default {
  name: 'PokemonCard',
  props: {
    url: String,
  },
  data() {
    return {
      pokemonsData: {
        sprites: {
          back_shiny: ''
        }
      },
    };
  },
  methods: {
     async getPokemonData() {
       const response =  await fetch(this.url)
       const data = await response.json();
       this.pokemonsData = data;
    },
  },
  mounted() {
    this.getPokemonData();
  },
};
</script>

<style scope>
.pokemon {
  width: 175px;
  height: 250px;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}
</style>

[baiwusanyu-c]

If there are deep-level object properties in the template, the properties should be initialized in data

[zqq-nuli]

He seems to have no problem and can run normally. The reason for the error is that you use a non-existing attribute when you are not assigning a value, so it will cause this problem. It is recommended that you use this method optional chain character on the dom

         <img class="pokemonImg" :src="pokemonsData?.sprites?.back_default" alt="" />

And I see that there doesn't seem to be a shiny field in the data sprites field