如何使用turbolinks jquery调用后更新vuejs组件数据

Question

我有一个vuejs组件，安装后应显示从服务器获取的数据并使用响应来更新数据。当我使用turbolinks时，vue js不更新dom。

我尝试了许多不同的方法来做到这一点，但没有工作=（我最后一次尝试是这样的一个：

Vue.component('pf-main-menu', { 
    props: [''], 
    template: '<pf-menu v-bind:links="links"></pf-menu>', 
    data: function() { 
    return { links: [{text: 'teste'}] } 
    }, 
    mounted: function() { 
    this.links = [{text: 'teste 2'}]; <-- This change works 

    $.ajax({ 
     url: '/api/v1/menus/main_menu.json', 
    }).success(function(res) { 
     this.links = [{text: 'teste 3'}]; <-- This change does not work 
    }.bind(this)); 
    } 
}); 

https://gist.github.com/victorlcampos/a8c4f05ab53097e4ac07d5bf8306646e

我已经尝试过这种方式：

Vue.component('pf-main-menu', { 
    props: [''], 
    template: '<pf-menu v-bind:links="links"></pf-menu>', 
    data: function() { 
    return { links: [{text: 'teste'}] } 
    }, 
    mounted: function() { 
    this.links = [{text: 'teste 2'}]; 
    var self = this; 

    $.ajax({ 
     url: '/api/v1/menus/main_menu.json', 
    }).success(function(res) { 
     self.links = [{text: 'teste 3'}]; 
    }); 
    } 
}); 

Answer 1

发生这种情况是因为您没有指出正确的范围，这种更改的范围在$ .ajax调用中，所以您只需执行如下操作：

mounted: function() { 
    this.links = [{text: 'teste 2'}]; <-- This change works 
    var self = this 
    $.ajax({ 
     url: '/api/v1/menus/main_menu.json', 
    }).success(function(res) { 
     self.links = [{text: 'teste 3'}]; <-- This change does not work 
    }.bind(this)); 
    } 
}); 

您也可以查看我的相似答案here。

Answer 2

根据Vue Docs，您必须使用Vue.set来确保反应行为。

data: function() { 
     return { 
     menu: { 
      links: [ {text: 'teste'}] } 
     } 
    }, .... 

在阿贾克斯sucess回报：

Vue.set(this.menu, links, [{text: 'teste 3'}]); 

更多Vue Docs