Question

我有一个项目列表，我想在更新阵列时更新这些项目。这是我的项目清单：

<li v-for="page in pages" class="menu__item">
    <a class="menu__link" @click="currentPage = page.id">{{ page.title }}</a>
</li>

我有一个变量，它是一个数组：

data: {
    pages: [],
    menuVisible: false
},

我有一个手表设置，可在需要时更新变量：

watch: {
  'menuVisible': function(val, oldVal) {
    $.getJSON('/pages/json/list.json', function(json){
      this.pages = json;
    });
  }
}

当＆＃34; menuVisible＆＃34;更新，它会激活它，并且var会更改，但列表不会更改。

基本了解我想要实现的目标;我有一个页面列表。通过ajax提交创建新页面。当用户打开包含页面列表的菜单时，它会更新menuVisible，而<!DOCTYPE html> <html lang="en-GB"> <head> <title>My Awesome Site</title> <style> html, body { padding: 0; margin: 0; } .my-awesome-flex-container { display: flex; } .my-awesome-flex-item { padding: 1em; flex-grow: 1; } .my-awesome-menu { background-color: #3d94a6; } .my-awesome-site { background-color: #c8c8c3; text-align: center; flex-grow: 6; } </style> </head> <body> <header class="my-awesome-flex-container"> <nav class="my-awesome-flex-item my-awesome-menu"> Menu </nav> <section class="my-awesome-flex-item my-awesome-site"> My Awesome Site </section> </header> </body> </html>会更新变量。我希望它能够更新页面列表，但事实并非如此。

我错过了什么？

Answer 1

我认为这只是一个范围问题，this.pages位于一个自治函数中，其中this的上下文是函数本身，而不是Vue实例。为了避免这种情况，你可以使用箭头功能，如果你能够我们ES6（它需要像babel那样编译以便在浏览器中使用）：

watch: {
  'menuVisible': function(val, oldVal) {
    $.getJSON('/pages/json/list.json', (json) => {
      this.pages = json;
    });
  }
}

或者你只需要在ajax请求之外设置一个指向this的变量：

watch: {
  'menuVisible': function(val, oldVal) {
    var self = this; // set self to 'this'

    $.getJSON('/pages/json/list.json', function(json){
      self.pages = json;
    });
  }
}

Answer 2

您的JSON响应处理程序中this的绑定存在问题。

this.pages内的{p> function(json) {..}与Vue组件的this.pages不同。 function() {..}在花括号内创建一个单独的上下文。因此，您的pages数组未获得更新。

您还可以使用Vue-devtools

验证上述内容

要解决此错误，请按以下步骤更改您的监视功能：

watch: {
  'menuVisible': function(val, oldVal) {
    $.getJSON('/pages/json/list.json', json => {
      this.pages = json;
    });
  }
}

在上面函数的第3行中，您可以注意到它现在使用了一个名为arrow function的东西。箭头函数语法确保outerscope（Vue组件）中的this与JSON响应处理函数的this相同。

或者，您也可以在json响应处理程序之外执行var that = this，并在JSON响应处理程序中设置that.pages。参考：What does 'var that = this;' mean in JavaScript?

var（数组）更改时的更新列表

2 个答案: