Vue-не удается получить данные реквизитов дочернего компонента после извлечения данных

Vue-не удается получить данные реквизитов дочернего компонента после извлечения данных

26.12.2019 05:23:30 Просмотров 44 Источник

Я пытаюсь передать данные, полученные от извлечения JSON, в дочерний компонент для создания v-карт. Через несколько часов я не могу найти проблему. Единственное, что я замечаю, - это то, что опора в родителе никогда не получает данные после завершения выборки.

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' ? 'http://ldimaria.challenge.trinom.io/obtener-promociones-costa-uruguaya.json' : 'http://ldimaria.challenge.trinom.io/obtener-promociones-punta-del-este.json';
      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>

Журнал консоли показывает данные без проблем, однако средства разработки VUE показывают мне, что dataPaquetes не определенenter 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>

Спасибо за чтение и за помощь

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59483263/vue-unable-to-receive-props-data-on-child-component-after-fetching-data#comment105142617_59483263
Да, я обычно использую себя вместо этого

Ответы - Vue-не удается получить данные реквизитов дочернего компонента после извлечения данных / Vue - Unable to receive props data on child component after fetching data

Neil.Work

26.12.2019 05:46:41

Использование себя-это не то же самое, что использование этого. self обычно относится к объекту window. Так что это нормально, если вы просто глушите материал там, но это не нормально, если вы ожидаете, что это будет компонент vue. Хотя я не думаю, что это проблема, но это может быть. Есть ли причины не использовать это?

Я думаю, что проблема в том, что у вас есть переменная, объявленная как в реквизитах, так и в данных. Это должно быть либо одно, либо другое. Если это не то, что передается в компонент, то поместите его в данные. Если он передается в компонент, используйте реквизит. Кроме того, я думаю, что обычно считается лучшей практикой обернуть свой реквизит в вычисляемую переменную для обработки случаев, когда он не определен и т. д.

И действительно, думая об этом больше, он, вероятно, не должен быть опорой из-за односторонней привязки природы vue. Поэтому, если это действительно пропеллер, вы должны излучать событие, которое было обновлено, и отправлять новое значение в событии, не изменяя его напрямую, и позволить ему снова обновиться через пропеллер.

Arc

26.12.2019 05:48:26

Во-первых, используйте thisвместо self. Нет ничего полезного в том, чтобы нарушать условности и формировать дурные привычки.

В Vue нельзя объявлять одну и ту же переменную как props, так и в data. Они доступны одинаково и будут конфликтовать друг с другом. Кроме того, если вы получаете данные асинхронно в своем родителе, убедитесь, что данные обновляются и передаются prop вниз через привязку должным образом.

Является ответом!
Khairul Habib

26.12.2019 07:18:40

я думаю, что проблема в том, что вы не определили тип данных реквизита. вы можете попробовать вот так:

в дочернем файле:

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

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

в Родительском файле вы должны объявить data.Paquetesв опции данных вместо реквизитов. вы не можете изменить данные реквизитов. вы можете изменить только data()

меняйтесь на thisвместо self

this-это традиционное имя переменной, а не ключевое слово JavaScript, часто используемое для хранения предыдущей “этой” области перед вводом новой.

и еще одна вещь, если selfпросто используется для отображения в HTML, нет необходимости повторно объявлять в dataPackageпросто используйте data()в HTML. но если вы собираетесь изменить значение, вы можете повторно объявить данные.

https://stackoverflow.com/questions/59483263/vue-unable-to-receive-props-data-on-child-component-after-fetching-data/59483790#comment105143781_59483790
Я начал читать руководства по извлечению данных в Vue, и несколько вещей оттуда плюс то, что вы рекомендовали, сделали трюк. 1) добавил тип данных в реквизитах 2) вызвал функцию API в created вместо mounted 3) изменил все selfs для этого 4) объявил пакеты данных в data как ' ', затем в начале функции объявил var vm = this, а после извлечения данных переопределил пакеты данных с vm.пакеты данных. Я не знаю точно, кто из них сделал этот трюк, но, сделав все четыре, теперь он работает. Большое спасибо !!!!
https://stackoverflow.com/questions/59483263/vue-unable-to-receive-props-data-on-child-component-after-fetching-data/59483790#comment105144687_59483790
большинство добро пожаловать. приятно знать, что это помогает. я вижу, что настоящая проблема заключается в том, где вы определяете данные в реквизитах в Родительском файле. вот почему он ничего не изменит, потому что мы не можем изменить данные реквизита.
Закрыть X