代码之家 › 专栏 › 技术社区 › Tarvo Mäesepp

数组在Vue中有时为空。js如果从API获取数据

vuejs2 vue.js javascript

Tarvo Mäesepp · 技术社区 · 8 年前

我正在尝试制作需要对象数组才能运行的组件。我用道具把它从父母传给孩子。

我正在使用axios从API获取数据。

由于数组中的对象可能不包含所需的键“is\u selected”,因此我将其添加到数组中的每个对象中。但问题是数组有时是空的。

我已经尽了我所能找到的一切。它工作的唯一方式是使用静态数据。

我创建了 sandbox 此外,您可以在控制台中看到,出于某种原因,“组件数据”是空数组,但如果您将静态对象分配给数组,它将完美地工作

这就是我在我的孩子身上所做的:

<template>
 <ul>
 <li v-for="item in items">{{item.title}}</li>
 </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      local_items: this.items
    };
  },
  methods: {},

  created() {
    var result = this.local_items.map(function(el) {
      var o = Object.assign({}, el);
      o.is_selected = false;
      return o;
    });
    this.local_items = result
    console.log('COMPONENT DATA: ', this.local_items);
  }
};
</script>

这是家长:

<template>
 <test :items="items"></test>
</template>

<script>
import Test from "./Test";
import axios from 'axios'
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {},

  async created () {
    try {
      axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response => {
          this.items = response.data
        })
    }catch (e){
      console.log('ERROR: ', e)
    }
  },

  components: {
    Test
  }
};
</script>

我做错了什么?谁能把我带到正确的轨道上吗?

编辑: 如果您正在查看此示例,可以在沙箱

1 回复 | 直到 8 年前

Quasdunk 8 年前

将评论发布为答案

这里的问题是,在子组件中,您只处理数据一旦创建子组件时 the created lifecycle 调用挂钩。那很酷只要

数据在构建组件时直接传递到组件中(即,它是“硬编码的”,例如在服务器端呈现标记时),并且
传入的数据从未更改。

但在大多数情况下,您要么通过Ajax动态地获取数据,要么在组件的生命周期内改变数据(或者两者都改变)。

在您的情况下,可以从父组件动态获取数据,然后将其传递给子组件。但当 created 生命周期事件激发。所以它 不会影响您的数据

如果在创建组件的过程中数据还不可用(很可能,因为您无法预测Ajax调用何时完成),或者
如果数据在组件的生命周期内发生更改。

因此,您可以

一旦父级获取了数据,就从父级触发您自己的事件,并从您的子级钩住它(在更大范围内可能会变得非常混乱)
watch 更改子组件的属性,然后执行必要的操作

所以基本上,你只想从 watch -处理程序而不是 已创建 -处理程序:

<script>
export default {
  props: {
    items: {
      type: Array,
      default: []
    }
  },

  data() {
    return {
      local_items: this.items
    };
  },

  watch: {
    /* this is called every time the items prop changes */
    items: function() {

      var result = this.local_items.map(function(el) {
        var o = Object.assign({}, el);
        o.is_selected = false;
        return o;
      });
      this.local_items = result
      console.log('COMPONENT DATA: ', this.local_items);
    }
  }

};
</script>