Question

我试图将获取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' ? '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>

感谢阅读和帮助

Answer 1

首先，使用this代替self。违反惯例和养成不良习惯无济于事。

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

Answer 2

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

在子文件中：

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

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

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

更改为this而不是self

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

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

Answer 3

使用self不同于使用self。自我通常是指窗口对象。因此，如果您只是在其中塞进东西，那很好，但是如果您期望它是vue组件，那不是很好。我不认为这是问题，但可能是。有什么理由不使用它吗？

我认为问题在于您在prop和data中都声明了变量。它应该是一个或另一个。如果不是传递给组件的东西，则将其放入数据中。如果传递到组件中，则使用道具。另外，我认为将道具包装在计算变量中以处理未定义等情况通常被认为是最佳做法。

而且，由于vue具有单一的绑定性质，因此更认真地考虑它可能不应该是一个道具。因此，如果它确实是一个道具，则应该发出一个已更新的事件，并在事件中发送新值，而不是直接对其进行修改，并允许它再次通过道具进行更新。

Vue-提取数据后无法在子组件上接收道具数据

3 个答案: