箭头函数不绑定数据与 axios 响应

Posted 2023-02-22

【中文标题】箭头函数不绑定数据与 axios 响应

【英文标题】：Arrow function does not bind data with axios response

【发布时间】：2019-05-19 02:52:07

【问题描述】：

import axios from 'axios'

export default 
name: 'FileList',
props: 
,
data () 
  return 
    pageSize: 10,
    offset: 0,
    model: "",
    rows: []
  
,
mounted() 
  this.search();  
,
computed: 
,
methods:
  search: function()
     var url = 'http://myurl'


     var options =  headers: 
       'Authorization': localStorage.getItem("authToken")
     

     axios.get(url, options).then( (response) => 

        console.log('BEFORE:',this.rows)
        this.rows= response.data;
        console.log('AFTER:',this.rows)

     )

即使找到此帖子：Axios can't set data 并应用解决方案后，此功能也不起作用。但这是加载组件后打印的内容：

Console logs

你可以看到帖子和我有同样的问题。

请帮帮我，因为我越来越绝望了。

编辑：删除 setTimeout 函数后，因为它没有任何帮助，我已经包含了渲染部分。因为这是我看到问题的地方。

<div v-if="rows.length =! 0" class="row" v-for="row in rows" style="margin-top: 30px">
  <div class="col-6 offset-3">
    <div class="card text-left">
      <div class="card-body">
        <h5 class="card-title"><b>ModelID: row.modelID</b> </h5>
        <h6 class="card-subtitle mb-2 text-muted"><b>File Name: </b>row.fileName</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>Autor:</b> row.author</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>Created:</b> row.createdAt</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>Updated:</b> row.updatedAt</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>Name:</b> row.name</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>ID:</b> row.id</h6>
        <h6 class="card-subtitle mb-2 text-muted"><b>Hash:</b> row.hash</h6>
        <a href="#" class="card-link">Descargar</a>
      </div>
    </div>   
  </div>
</div>  

【问题讨论】：

你还应该将setTimeout函数内部的回调转换为箭头函数

@Boussadjra Brahim 这只是为了记录日志，这是错误的，但并没有解决问题

【参考方案1】：

问题在于 v-if 条件，是一个赋值，而不是一个否定条件。

rows.length =! 0

应该是

rows.length != 0

【讨论】：

有时很难发现！

@Bert 仅适用于不使用 linter 的人！ ;)