Question

我是Vuejs的新用户，所以我肯定是我的代码。我有这个简单的app.vue文件，我想从JSON获取数据，然后根据数据设置我的菜单。我做了一个简单的测试：

export default {
  name: 'app',
  data:function(){
    return{
      menu:[]
    }
  },
  methods:{
    GetMenu:function(s){
      $.get({
    url: 'static/json/menu.json',
    success:function(res) {
      s = res.menu;
      console.log(s[0].artist);//<-- have result
    }
    })
    }
  },
  created:function(){
    this.GetMenu(this.menu);
    console.log(this.menu);//<-- have [__ob__:Observer]
  }
}

如果我运行上面的代码，我会首先从console.log(this.menu)得到结果，[__ob__:Observer]，然后只得到console.log(s[0].artist)的结果，这就是我想要的结果。我试过了：

setTimeout(function(){
console.log(this.menu);//<-- undefined
},2000);

然后我得到undefined。我该如何解决这个问题？

Update01

我试过了：

export default {
      name: 'app',
      data:function(){
        return{
          menu:[]
        }
      },
      methods:{
        GetMenu:function(){
          $.get({
        url: 'static/json/menu.json',
        success:function(res) {
        console.log(res);//<-- result
          return res.menu;
        }
        })
        }
      },
      mounted:function(){
        this.menu = this.GetMenu();
        console.log(this.menu);//<-- undefined
      }
    }

基本上，我将GetMenu()更改为return res.menu，然后执行this.menu = this.GetMenu();。我仍然得到undefined。

Answer 1

正如评论中所提到的，你的this指的是错误的。此外，无需通过this.menu。

{
  name: 'app',
  data:function(){
    return{
      menu:[]
    }
  },
  methods:{
    GetMenu:function(){
      $.get({
        url: 'static/json/menu.json',
        success:function(res) {
          this.menu = res.menu;
        }.bind(this)
      })
    }
  },
  created:function(){
    this.GetMenu();
  }
}

请参阅How to access the correct this inside a callback?

Vuejs 2 - 从JSON传递数据

1 个答案: