Question

我在Test.vue组件中有一个方法。我将其导入到我的main.js中，然后可以像这样调用其方法：this.$refs.test.testMethod()。

我在ajaxMethod()中有一个方法Test.vue，看起来像这样：

 function ajaxMethod(){
   this.$http.post(url).then(function(res){ return "hi from test"})
 }

现在，我像这样从我的主要方法（位于main.js中）进行ajax调用：

this.$http.post(url).then(function(response){
let a = this.$refs.test.ajaxMethod()
console.log(a) //a is undefined
})"

我试图在Test.vue中设置变量的值，然后像这样从main.js中读取它：

//in Test.vue
data:{
  variable:""
}
methods:{
function ajaxMethod(){
   this.$http.post(url).then(function(res){ 
      this.variable="hi from test"
   })
}
}

//in main.js
this.$http.post(url).then(function(response){
   this.$refs.test.ajaxMethod()
    console.log(this.$refs.test.variable) //when i call that function first time result is empty string and when i call it second time result is 'hi from test'
})"

我希望ajaxMethod()返回'hi from test'而不是undefined

编辑

我可以使用以下解决方法解决此问题：

 a.then(function(val){console.log(val)})

据我了解，我在promise中使用了值，可以吗？还是有另一个“合适的”解决方案？

Answer 1

您没有从ajaxMethod返回任何内容。而且，您不应该这样耦合您的组件。注意同步和异步代码块。 post方法返回一个promise，而不是值。您可以在回调函数中获取该值。

function ajaxMethod(){
   return this.$http.post(url);
}

您需要兑现承诺

this.$refs.test.ajaxMethod().then(function(res){
    console.log(res)
})

，然后获取值。我不知道确切的情况，但我认为您应该使用事件将数据从子级发送到父级，而不是这种方式。

编辑以进行编辑：正如我所说的，您应该使用事件而不是这种方式。

另一个ajax调用内的ajax调用返回未定义

1 个答案: