Vue应用中如何将WP API GET返回对象赋值给data空list以支持v-for遍历

核心修正逻辑 #

• 之前赋值得到undefined的核心原因是所有异步回调都用了普通function写法，上下文指向丢失，回调内部根本访问不到Vue实例上的data属性，操作的不是声明的list对象。把所有异步回调替换为箭头函数后，this会自动绑定当前Vue实例，直接访问实例属性即可。
• 不需要把list作为参数传入方法，这种引用传递的写法在异步场景下很容易出现赋值不生效的问题，直接通过实例this访问data更稳定。
• 对已经在data中初始化过的list做整体对象赋值，Vue2的响应式系统可以正常追踪变化，不需要额外使用$set处理响应式问题。

修正后的完整可用代码 #

new Vue({
    name: 'o365-edit-modal-wrapper',
    el: '#o365-modal-edit-wrapper',
    data: function() {
        return {
            list: {},
        }
    },
    created() {
        this.get_array_of_post_objects('applications');
    },
    methods: {
        get_array_of_post_objects(slug) {
            wp.api.loadPromise.done(() => {
                const Posts = wp.api.models.Post.extend({
                    url: wpApiSettings.root + 'fh/v1/menus/' + slug,
                });
                const all_posts = new Posts();
                all_posts.fetch().then((posts) => {
                    // 接口返回数据直接整体赋值给list
                    this.list = posts.data;
                });
            });
        },
    },
});

模板端兜底优化 #

初始状态下list是空对象，直接访问list.selected会出现undefined报错，给遍历值加默认空数组兜底，避免初始渲染异常：

<button 
  class="button" 
  v-for="app in list.selected || []" 
  :key="app.order"
>

内容的提问来源于stack exchange，提问作者user12394904