Vue.js中如何将AJAX获取的产品列表数据传入实例完成渲染？

• 数据引用割裂：你在Vue作用域外定义的全局products变量，和Vue实例内部data.products是两个完全独立的变量。Vue初始化时只会追踪自己内部声明的products属性，你后续给全局变量赋值，Vue完全感知不到变化，自然不会触发页面重渲染。
• 调用链路缺失：你写的getHello()函数没有被任何逻辑触发，AJAX请求根本不会自动执行，哪怕变量引用是通的，也不会发请求拿数据。
• 响应式规则错位：Vue的响应式系统只会对data初始化时声明的属性做拦截劫持，你在实例外部挂载的变量完全绕开了这套机制，就算赋值成功也没法驱动视图更新。

核心逻辑是：把AJAX请求的触发时机放在Vue的生命周期内，拿到接口返回数据后，直接赋值给Vue实例内部声明的products属性，通过Vue的响应式机制自动完成页面渲染。

调整后的完整代码 #

var app = new Vue({
    delimiters: ['${', '}$'],
    el: '#app',
    data: {
        // 初始设为空数组，替换原有的硬编码商品列表
        products: []
    },
    // 页面DOM挂载完成后自动触发数据加载
    mounted() {
        this.loadProductsList()
    },
    methods: {
        loadProductsList() {
            const vm = this // 保存Vue实例的引用，避免AJAX回调中this指向丢失
            $.ajax({
                url: '{{ path('get_products') }}',
                type: 'GET',
                dataType: 'json'
            }).done(function(responseData) {
                // 直接给Vue内部的products属性赋值，触发视图自动更新
                vm.products = responseData
            }).fail(function(error) {
                console.error('商品列表加载失败', error)
            })
        }
    }
})

关键注意事项 #

• 所有需要被Vue追踪、用来渲染页面的数据，必须声明在Vue实例的data作用域内，不能在外部定义独立变量当数据源。
• jQuery的AJAX回调函数默认this指向jqXHR对象，要提前把Vue实例的this存为临时变量；也可以直接用ES6箭头函数写回调，箭头函数会自动继承外层的this指向，省去手动保存引用的步骤。
• 不需要等AJAX请求完成后再初始化Vue，常规场景下在mounted钩子中加载数据是最通用的实现方案，Vue会自动在数据更新后重新渲染表格内容。

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