Vue.js 数组复制的问题

[qfdk]

vue.js 直接上代码 打算做一个利用 algolia 搜索的工具,引用了官方 api 可以查询,想把结果放在数组里面,然后显示出来. 然而 用了 index.search 的方法可以得到数据,但是循环结束之后数据就没有了. 也就是 1 有回显 2 无回显 this.searchResult 应该算是全局变量吧,为什么会丢失数据呢?难道需要进行数组的复制? 求解 先谢过.

  data() {
    return{
      query:'',
      searchResult:[],
    }
  },
  methods:{
    search:function()
    {
      var client = algoliasearch('xxx', 'xxx')
      var index = client.initIndex('getstarted_actors')
      index.search(this.query,function(err, content) {
        content.hits.forEach(function(e,index){
          this.searchResult.push(e)
        },this)
        console.log('1'+this.serarchResult) // 有回显
      });
       console.log('2'+this.serarchResult) // 无显示数据
    }
  }

先谢过大家

[ck65]

index.search() 是个异步方法吧，所以 2 执行的时候 this.$data.searchResult 仍然是空数组，然后等回调执行完毕后 this.$data.searchResult 才有值，所以 1 就能打印了。

[qfdk]

@ck65 那应该如何解? 用 sleep? 总感觉不科学

[qfdk]

@ck65 似乎不是这样的,用了 setinterval 打印出来是 undefined

```
index.search(this.query,function(err, content) {
var tmp=[]
content.hits.forEach(function(e,index){
tmp.push(e)
},this)
this.searchResult=JSON.parse(JSON.stringify(tmp))
console.log(this.searchResult);
});
```
这样会打印出来 object 但是 webui 并没有显示出来也就是 this.searchResult 最后还是空

[ljcarsenal]

Vue.netxtTick

[qfdk]

@ljcarsenal 好 我去看一下

[lijsh]

我觉得一楼是对的，至于没显示出来，可能是 this 丢失了。

[ipwx]

在回调外面 var self = this; 然后回调里面用 self.

[qfdk]

@ljcarsenal 似乎不可以

[qfdk]

@lijsh
@ipwx
我去试一下,似乎还是没明白 我试一下

[smallpath]

用箭头函数拜托，第一层 search 的回调用 function 就已经把 this 给丢了， forEach 第二个参数上下文这个时候 this 已经是 undefined 了。

[qfdk]

@ck65
@lijsh
@ipwx
感谢你们确实是这样 this 丢失了!

[qfdk]

@smallpath 刚才又看了下尖头函数 原来这样不会产生新的上下文 谢谢你的分析 又学东西了

[jimliang]

javascript 两大基础： 异步和 this 作用域

[qfdk]

@jimliang 🙏 说的极是 感觉还有好多要学习