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

Question

Vue.js version 2, with single-file components and vue-router (and webpack but that shouldn't be important here).

I've researched this as well as I believe I can and cannot seem to unravel a good pattern for populating and rendering an object when a component is rendered, hoping the solution is obvious to someone and easily explained.

Main.js (called from 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 (it's important to note that what I'm doing here is 1) making an api call (via javascript promise) 2) iterating the response and populating the temp Object let x = {} properties with keys and values of each important bit then 3) triggering the computed.cObj.set() in effort to render the list):

<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>

Looking at the populated object in console I get the following but the list isn't rendered:

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

Here is a similar question Vue.js : How to make dynamic menu?

Answer 1

Try this in your Child.vue :

The Array Way:

<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>

The Object Way:

<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>