V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qfdk
V2EX  ›  程序员

Vue.js 数组复制的问题

  •  
  •   qfdk ·
    qfdk · 2017-04-09 19:40:37 +08:00 · 5492 次点击
    这是一个创建于 2785 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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) // 无显示数据
        }
      }
    

    先谢过大家

    14 条回复    2017-04-10 13:51:29 +08:00
    ck65
        1
    ck65  
       2017-04-09 19:46:13 +08:00   ❤️ 1
    index.search() 是个异步方法吧,所以 2 执行的时候 this.$data.searchResult 仍然是空数组,然后等回调执行完毕后 this.$data.searchResult 才有值,所以 1 就能打印了。
    qfdk
        2
    qfdk  
    OP
       2017-04-09 19:50:37 +08:00
    @ck65 那应该如何解? 用 sleep? 总感觉不科学
    qfdk
        3
    qfdk  
    OP
       2017-04-09 19:56:42 +08:00
    @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
        4
    ljcarsenal  
       2017-04-09 20:09:18 +08:00
    Vue.netxtTick
    qfdk
        5
    qfdk  
    OP
       2017-04-09 20:10:15 +08:00
    @ljcarsenal 好 我去看一下
    lijsh
        6
    lijsh  
       2017-04-09 20:15:52 +08:00   ❤️ 1
    我觉得一楼是对的,至于没显示出来,可能是 this 丢失了。
    ipwx
        7
    ipwx  
       2017-04-09 20:18:54 +08:00   ❤️ 1
    在回调外面 var self = this; 然后回调里面用 self.
    qfdk
        8
    qfdk  
    OP
       2017-04-09 20:20:19 +08:00
    @ljcarsenal 似乎不可以
    qfdk
        9
    qfdk  
    OP
       2017-04-09 20:21:03 +08:00
    @lijsh
    @ipwx
    我去试一下,似乎还是没明白 我试一下
    smallpath
        10
    smallpath  
       2017-04-09 20:22:27 +08:00   ❤️ 1
    用箭头函数拜托,第一层 search 的回调用 function 就已经把 this 给丢了, forEach 第二个参数上下文这个时候 this 已经是 undefined 了。
    qfdk
        11
    qfdk  
    OP
       2017-04-09 20:22:43 +08:00
    @ck65
    @lijsh
    @ipwx
    感谢你们确实是这样 this 丢失了!
    qfdk
        12
    qfdk  
    OP
       2017-04-09 22:37:33 +08:00 via iPhone
    @smallpath 刚才又看了下尖头函数 原来这样不会产生新的上下文 谢谢你的分析 又学东西了
    jimliang
        13
    jimliang  
       2017-04-10 10:20:07 +08:00   ❤️ 1
    javascript 两大基础: 异步和 this 作用域
    qfdk
        14
    qfdk  
    OP
       2017-04-10 13:51:29 +08:00 via iPhone
    @jimliang 🙏 说的极是 感觉还有好多要学习
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1322 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 17:48 · PVG 01:48 · LAX 09:48 · JFK 12:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.