javascript - Vue.js - 调用 API 并渲染来自子单文件组件的响应

Question

Vue.js 版本 2，带有单文件组件和 vue-router(以及 webpack，但这在这里并不重要)。

我对此进行了研究，并且我相信我可以但似乎无法阐明在渲染组件时填充和渲染对象的良好模式，希望解决方案对某人来说是显而易见的，并且很容易解释。

Main.js(从 webpack.base.config 调用):

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

App.vue:

<template>
    <router-view></router-view>
</template>

<script>
    export default {
      name: 'app'
    }
</script>

Child.vue(需要注意的是，我在这里所做的是 1)进行 api 调用(通过 JavaScript Promise)2)迭代响应并填充临时 对象 let x = {} 属性，其中包含每个重要位的键和值，然后 3) 触发 compulated.cObj.set() 来渲染列表):

<template>
  <div class="child">
    <ul>
      <li v-for="i in cObj">{{ i }}</li>
    </ul>
  </div>
</template>

<script>
    export default {
      name: 'child',
      data () {
        return {
          obj: {}
        }
      },
      computed: {
        cObj: {
          get: function () {
            return this.obj
          },
          set: function (nv) {
            this.obj= nv
          }
        },
        // cObj: function () {
          // return this.getAll()
        // }
      },
      created () {
        let conditional = true
        if (!conditional) // ...do something else
        else this.getAllX()
      },
      methods: {
        getAll: function () {
          let x = {} // temporary object

          // in this promise I'm returning data from the server
          server.getData()
            .then(function (r) {

              // iterate response
              r.records[0].operations().then(r => {
                for (let a in r) {
                  if (typeof r[a].records === 'object') {
                    for (let b in r[a].records) {
                      Object.keys(r[a].records[b]).forEach(function (key) {
                        if (r[a].records[b][key] !== undefined) {
                          // add key/value to x
                          x[key] = r[a].records[b][key]
                        }
                      })
                    }
                  }
                }
              })
            })
            .catch(function (err) {
              console.log(err)
            })
          this.cObj = x // THIS IS WHAT IS KILLING ME HERE, I must be misunderstanding the documentation here because the computed `set` method isn't triggered or I'm misunderstanding vue lifecycle, I thought calling the computed.cObj.set() should trigger the rendering of the list but it does not. 
          // return x | tried this as well (see commented out computed.cObj)
        }
      }
    }
</script>

查看控制台中填充的对象，我得到以下内容，但列表未呈现:

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

这是一个类似的问题Vue.js : How to make dynamic menu?

Answer 1

在您的Child.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>