使用TurboLinks时如何在jquery调用后更新vue.js组件数据 [英] How to update vuejs component data after jquery calls when use turbolinks

问题描述

我有一个vuejs的组件，该组件在挂载后应显示从服务器获取的数据并使用响应来更新数据.当我使用Turbolinks时，vue js不会更新dom.

I have a vuejs's component that after mounted should show data fetched from server and use response to update data. When I use turbolinks the vue js don't update the dom.

我尝试了许多不同的方法来做到这一点，但都没有成功=(，我最后一次尝试的是这种方法:

I tried many different ways to do that, but none worked =(, my last tried was this one:

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

我也已经尝试过这种方式:

I already tried this way too:

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'}];
    });
  }
});

推荐答案

根据Vue文档，您必须使用Vue.set来确保响应行为.

According with Vue Docs you must use Vue.set to ensure reactive behavior.

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

在ajax成功返回中:

In ajax sucess return:

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

更多 Vue文档

这篇关于使用TurboLinks时如何在jquery调用后更新vue.js组件数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！