Javascript Vue.js-从子单文件组件调用API并呈现响应

Vue.js版本2，带有单文件组件、Vue路由器和网页包，但这在这里并不重要

我已经对此进行了研究，我相信我可以也不可能在渲染组件时发现填充和渲染对象的良好模式，希望解决方案对某人来说是显而易见的，并且易于解释

从webpack.base.config调用Main.js：

var vm = new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

查看console中填充的对象，我得到以下结果，但列表未呈现：

// {}
// detailOne: "asdf"
// detailTwo: "asdf asdf"
// __proto__: Object { … }

这里有一个类似的问题

在你的孩子身上试试这个。vue：

阵列方式：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in cObj" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cObj: {}
    }
  },
  created () {
      let conditional = true
      if (!conditional) {

      }
      else {
        this.getAll()
      }
    },
    methods: {
      getAll: function () {
        let x = [
          { id: 1, name: 'one' },
          { id: 2, name: 'two' },
          { id: 3, name: 'thre' },
        ]
        this.cObj = x;
      }
    }
}
</script>

对象方式：

<template>
  <div>
    <ul>
      <li v-for="(value, key) in cObj" :key="key">{{ key }} : {{ value.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cObj: {}
    }
  },
  created () {
      let conditional = true
      if (!conditional) {

      }
      else {
        this.getAll()
      }
    },
    methods: {
      getAll: function () {
        let x = {
          first: { id: 1, name: 'one' },
          second: { id: 2, name: 'two' },
          third: { id: 3, name: 'three' },
        };
        this.cObj = x;
      }
    }
}
</script> 

---

为什么你需要一个计算属性？您可以将cObj作为数据启动，然后像这样简单地设置它。cObj=x；谢谢，我来试一试。如果我错了，请纠正我，如果我理解正确，您是说我应该设置这个。data=x。编辑：我相信你的意思是把计算出来的cObj移到数据中，试试看。不。我会给你一个更完整的样品。请稍等：是的，将cObj移到数据：好的，谢谢。。。测试。编辑：糟糕！也不管用。与之前一样，cObj是根据控制台输出填充的，但组件在填充对象后不会呈现数据：/。根据您的编辑，该对象与我得到的对象不同。请参阅原始文章末尾附近的注释对象。这里的问题很可能是对象吗？旁注，我认为这个问题是因为我对生命周期缺乏了解，因为我已经看到列表填充，但是当它填充时，它是一种黑客行为，因为它只有在我保存了对代码的更改并触发了热重新加载时才呈现，但当然我无法让列表自然呈现。我将尝试将其渲染为一个对象数组，就像您所做的那样。对不起。它应该也适用于数组和对象。数组：，对象：我更新了代码以证明这两种方法都有效。希望你也是。再次感谢你，并且…同意。。。但我发现我正在构建的对象可能有问题，在您的示例中，我的问题缺少一个关键部分，即循环响应，构建临时对象，并将临时对象设置为vue数据项。我很确定，你列出的答案将帮助所有面临同样问题的人，但我需要它在本地工作，然后才能解决这个问题，所以我正在努力找到我在本地失败的地方，并将尽快选择答案。谢谢你，在插手之后，将x设置为数组并使用x.push。。。为我做了最后的改变。我选择这个作为答案的关键原因是computed:属性不是必需的。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in cObj" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cObj: {}
    }
  },
  created () {
      let conditional = true
      if (!conditional) {

      }
      else {
        this.getAll()
      }
    },
    methods: {
      getAll: function () {
        let x = [
          { id: 1, name: 'one' },
          { id: 2, name: 'two' },
          { id: 3, name: 'thre' },
        ]
        this.cObj = x;
      }
    }
}
</script>

<template>
  <div>
    <ul>
      <li v-for="(value, key) in cObj" :key="key">{{ key }} : {{ value.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cObj: {}
    }
  },
  created () {
      let conditional = true
      if (!conditional) {

      }
      else {
        this.getAll()
      }
    },
    methods: {
      getAll: function () {
        let x = {
          first: { id: 1, name: 'one' },
          second: { id: 2, name: 'two' },
          third: { id: 3, name: 'three' },
        };
        this.cObj = x;
      }
    }
}
</script>