Vue-не удается получить данные реквизитов дочернего компонента после извлечения данных
Я пытаюсь передать данные, полученные от извлечения 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 не определен
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>
Спасибо за чтение и за помощь


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

26.12.2019 05:46:41
Использование себя-это не то же самое, что использование этого. self обычно относится к объекту window. Так что это нормально, если вы просто глушите материал там, но это не нормально, если вы ожидаете, что это будет компонент vue. Хотя я не думаю, что это проблема, но это может быть. Есть ли причины не использовать это?
Я думаю, что проблема в том, что у вас есть переменная, объявленная как в реквизитах, так и в данных. Это должно быть либо одно, либо другое. Если это не то, что передается в компонент, то поместите его в данные. Если он передается в компонент, используйте реквизит. Кроме того, я думаю, что обычно считается лучшей практикой обернуть свой реквизит в вычисляемую переменную для обработки случаев, когда он не определен и т. д.
И действительно, думая об этом больше, он, вероятно, не должен быть опорой из-за односторонней привязки природы vue. Поэтому, если это действительно пропеллер, вы должны излучать событие, которое было обновлено, и отправлять новое значение в событии, не изменяя его напрямую, и позволить ему снова обновиться через пропеллер.

26.12.2019 05:48:26
Во-первых, используйте this
вместо self
. Нет ничего полезного в том, чтобы нарушать условности и формировать дурные привычки.
В Vue нельзя объявлять одну и ту же переменную как props
, так и в data
. Они доступны одинаково и будут конфликтовать друг с другом. Кроме того, если вы получаете данные асинхронно в своем родителе, убедитесь, что данные обновляются и передаются prop вниз через привязку должным образом.

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. но если вы собираетесь изменить значение, вы можете повторно объявить данные.

