Vue.js Vue-获取数据后无法接收子组件上的道具数据

我试图将获取JSON的数据传递给子组件以创建v卡。几个小时后，我找不到问题。我注意到的唯一一件事是，父对象中的prop在抓取完成后从未获取数据

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>

App.vue（父级）
{{tab.name}
从“./components/Card.vue”导入卡
导出默认值{
名称：“应用程序”，
组成部分：{
卡，
},
数据：（）=>({
佩皮托：0，
评级：3，
对,，
isFetching:false，
chequeoData：错，
城市：[{
id:“pE”，
名称：“埃斯特角”
},{
id:“cU”，
名称：“乌拉圭海岸”
}],
数据包：[]，
}),
方法：{
加载包：功能（val）{
self.dataPackages=[]；
变量proxyUrl=https://cors-anywhere.herokuapp.com/',
targetUrl=val='cU'？'****'：'*******'；
获取（代理URL+目标URL）
.then（blob=>blob.json（））
。然后（数据=>{
self.dataPackages=data.promociones；
//eslint禁用下一行无控制台
日志（self.dataPackages）；
self.chequeoData=true；
})
}
},
道具：{
dataPaquetes:self.dataPackages
},
安装的（）{
这个文件名为loadPacks（）
}
};
@导入url（'https://fonts.googleapis.com/css?family=Roboto:300，400500700 |材质+图标“）；

控制台日志显示的数据没有问题，但是VUE开发工具显示dataPaquetes未定义

Card.vue（子组件）
{{item.ciudad}
导出默认值{
姓名：'卡片'，
道具：['dataPaquetes']，
数据：（）=>({
评级：3，
数据包：self.dataPaquetes，
}),
方法：{}，
安装的（）{
self.dataPackages=self.dataPaquetes；
//eslint禁用下一行无控制台
console.log（self.dataPaquetes）
},
};

---

感谢您的阅读和帮助

首先，请使用

this

而不是

self

。打破惯例和养成坏习惯是没有好处的

---

在Vue中，不能在

道具

和

数据

中声明相同的变量。它们的访问方式相同，并且会相互冲突。此外，如果您在父级异步获取数据，请确保数据正在更新并通过绑定正确传递道具。

我认为问题在于您没有定义道具的数据类型。您可以这样尝试：

在子文件中：

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

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

在父文件中，必须在数据选项中声明

data.Paquetes

，而不是props。不能更改道具数据。您只能更改

data（）

选项

更改为

this

而不是

self

this

是指当前作用域的实际JavaScript关键字，而

self

是传统变量名，而不是JavaScript关键字，通常用于在输入新作用域之前存储以前的“this”作用域

---

还有一件事，如果

dataPackage

仅用于在HTML中显示，则无需在

data（）

中重新声明，只需在HTML中使用

{{dataPaquetes}

。但是，如果要更改值，可以重新声明到数据中。

在您的示例中，什么是

self

？是的，我通常使用self而不是self。我开始阅读有关在Vue中获取数据的指南，从中获得一些东西，再加上您推荐的技巧。1） 在props中添加了数据类型2）在中调用API函数创建而不是装入3）将此4）声明的数据包在数据中的所有self更改为“”，然后在函数开始时声明var vm=this，并在使用vm.dataPackages检索重新定义的数据包后。我不知道到底是哪一个搞出了这个把戏，但是把这四个都做了，现在它起作用了。谢谢！！！！非常欢迎。很高兴知道这有帮助。我可以看出，真正的问题是如何在父文件的props中定义数据。这就是为什么它不会改变任何东西，因为我们不能改变道具数据。

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

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