-1

Im trying to pass the data gotten from fetching a JSON, to a child component to create v-cards. After a few hours, I can't find the problem. The only thing I notice is that the prop in the parent never gets the data after the fetching is finished.

App.vue (parent)

<template>
  <v-app>
    <v-tabs centered="centered">
      <v-tab v-for="tab in cities" :key="tab.id" @click='loadPacks(tab.id)'>{{tab.name}}</v-tab>
   </v-tabs>
  <cards v-if="chequeoData" :dataPaquetes="dataPackages" :key="dataPackages"/>
  </v-app> 
</template>

<script>
import cards from './components/Card.vue'

export default {
  name: 'App',
  components: {
    cards,
  },
  data: () => ({
    pepito: 0,
    rating: 3,
    centered: true,
    isFetching: false,
    chequeoData: false,
    cities: [{
      id: "pE",
      name: "Punta del Este"
    },{
      id: "cU",
      name: "Costa Uruguaya"
    }],
    dataPackages: [],
  }),
  methods: {
  loadPacks: function (val) {
      self.dataPackages = [];
      var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
      targetUrl = val == 'cU' ? '*****' : '*******';
      fetch(proxyUrl + targetUrl)
        .then(blob => blob.json())
        .then(data => {
          self.dataPackages = data.promociones;
          // eslint-disable-next-line no-console
          console.log(self.dataPackages);
          self.chequeoData = true;
        })
    }
  },
  props: {
    dataPaquetes: self.dataPackages
  },
 mounted() {
    this.loadPacks()
  }
};
</script>

<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons');


</style>

The console log shows the data with no problems, however the VUE dev tools show me that dataPaquetes is undefinedenter image description here

Card.vue (Child component)

<template>
<v-container>
<v-layout>
<v-flex xs12 sm6 md3 lg3 v-for="item in dataPackages" :key="item.codigo">
<v-card>{{item.ciudad}}
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>


<script>

export default {
  name: 'cards',
  props: ['dataPaquetes'],
  data: () => ({
      rating: 3,
      dataPackages: self.dataPaquetes,
    }),
  methods: {},
  mounted() {
    self.dataPackages = self.dataPaquetes;
    // eslint-disable-next-line no-console
    console.log(self.dataPaquetes)
},
};
</script>

Thanks for reading, and for the help

2
  • What is self in you examples? Is that supposed to be this?
    – Mark
    Dec 26, 2019 at 2:28
  • Yes, I usually use self instead of this
    – silphonix
    Dec 26, 2019 at 2:30

2 Answers 2

0

i think the problem is you not defined the data type of the props. you can try like this:

in child file:

props: {dataPaquetes: Object}, // depends on your data type

data: () => ({
      rating: 3,
      dataPackages: this.dataPaquetes,
    }),

in parent file you must declare data.Paquetes in data option instead of props. you cannot change props data. you only can change data() option

change to this instead of self

this is an actual JavaScript keyword that refers to the current scope, while self is a traditional variable name not a JavaScript keyword, often used to store the previous “this” scope before entering a new one.

and also one more thing, if dataPackage is just used to display in HTML, there is no need to re declare in data() just use the {{dataPaquetes}} in HTML. but if you are going to change the value, you can redeclare into the data.

2
  • I started to read guides about fetching data in Vue, and a few thing from there plus what you recommended made the trick. 1) Added the data type in the props 2) Called the API function in created instead of mounted 3) Changed all the selfs for this 4) Declared dataPackages in data as ' ', then at the start of the function declared var vm = this, and after retrieving the data redefined dataPackages with vm.dataPackages. I don't know exactly which one of those made the trick but doing all the four, now it works. Thanks a lot !!!!
    – silphonix
    Dec 26, 2019 at 5:04
  • most welcome. good to know it's help. i can see the real problem is where you define the data in props in parent file. that's why it'll not changing anything because we cannot alter the props data. Dec 26, 2019 at 6:21
0

First, use this instead of self. There is nothing to gain by breaking convention and forming bad habits.

In Vue, you can not declare the same variable in both props and in data. They are accessed the same way and will conflict with each other. Additionally, if you are fetching data asynchronously in your parent, make sure the data is updating and passing the prop down via binding properly.

Not the answer you're looking for? Browse other questions tagged or ask your own question.