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'}] }
        }
     }, ....

在ajax成功回归中：

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

更多Vue Docs

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

2 个答案: