-1

我试图将从获取 JSON 中获得的数据传递给子组件以创建 v-card。几个小时后，我找不到问题。我唯一注意到的是，在获取完成后，父项中的道具永远不会获取数据。

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>

控制台日志显示数据没有问题，但是 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>

感谢阅读，感谢帮助

4

2 回答 2

0

首先，使用this代替self. 打破常规和养成坏习惯没有任何好处。

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

于 2019-12-26T02:48:26.573 回答
0

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

在子文件中：

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

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

在父文件中，您必须data.Paquetes在数据选项而不是道具中声明。您不能更改道具数据。你只能改变data()选项

改为this而不是self

this是一个实际的 JavaScript 关键字，指的是当前作用域，而self它是一个传统的变量名，而不是 JavaScript 关键字，通常用于在进入新的作用域之前存储之前的“this”作用域。

还有一件事，如果dataPackage只是用于在HTML中显示，则无需在HTML中重新声明data()即可{{dataPaquetes}}。但是如果要更改值，则可以重新声明到数据中。

于 2019-12-26T04:18:40.873 回答