• 请不要在回答技术问题时复制粘贴 AI 生成的内容
qfdk
26.34D
0.15D
V2EX  ›  程序员

Vue.js 数组复制的问题

  •  
  •   qfdk ·
    PRO
    ·
    qfdk · Apr 9, 2017 · 5887 views
    This topic created in 3349 days ago, the information mentioned may be changed or developed.

    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 replies    2017-04-10 13:51:29 +08:00
    mogita
        1
    mogita  
       Apr 9, 2017   ❤️ 1
    index.search() 是个异步方法吧,所以 2 执行的时候 this.$data.searchResult 仍然是空数组,然后等回调执行完毕后 this.$data.searchResult 才有值,所以 1 就能打印了。
    qfdk
        2
    qfdk  
    OP
    PRO
       Apr 9, 2017
    @ck65 那应该如何解? 用 sleep? 总感觉不科学
    qfdk
        3
    qfdk  
    OP
    PRO
       Apr 9, 2017
    @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  
       Apr 9, 2017
    Vue.netxtTick
    qfdk
        5
    qfdk  
    OP
    PRO
       Apr 9, 2017
    @ljcarsenal 好 我去看一下
    lijsh
        6
    lijsh  
       Apr 9, 2017   ❤️ 1
    我觉得一楼是对的,至于没显示出来,可能是 this 丢失了。
    ipwx
        7
    ipwx  
       Apr 9, 2017   ❤️ 1
    在回调外面 var self = this; 然后回调里面用 self.
    qfdk
        8
    qfdk  
    OP
    PRO
       Apr 9, 2017
    @ljcarsenal 似乎不可以
    qfdk
        9
    qfdk  
    OP
    PRO
       Apr 9, 2017
    @lijsh
    @ipwx
    我去试一下,似乎还是没明白 我试一下
    smallpath
        10
    smallpath  
       Apr 9, 2017   ❤️ 1
    用箭头函数拜托,第一层 search 的回调用 function 就已经把 this 给丢了, forEach 第二个参数上下文这个时候 this 已经是 undefined 了。
    qfdk
        11
    qfdk  
    OP
    PRO
       Apr 9, 2017
    @ck65
    @lijsh
    @ipwx
    感谢你们确实是这样 this 丢失了!
    qfdk
        12
    qfdk  
    OP
    PRO
       Apr 9, 2017 via iPhone
    @smallpath 刚才又看了下尖头函数 原来这样不会产生新的上下文 谢谢你的分析 又学东西了
    jimliang
        13
    jimliang  
       Apr 10, 2017   ❤️ 1
    javascript 两大基础: 异步和 this 作用域
    qfdk
        14
    qfdk  
    OP
    PRO
       Apr 10, 2017 via iPhone
    @jimliang 🙏 说的极是 感觉还有好多要学习
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3912 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 634ms · UTC 10:16 · PVG 18:16 · LAX 03:16 · JFK 06:16
    ♥ Do have faith in what you're doing.