V-在控制台上提取后不显示记录[重复]

Posted 2023-02-22

【中文标题】V-在控制台上提取后不显示记录[重复]

【英文标题】：V-for not displaying records after his has fetched on console [duplicate]

【发布时间】：2018-04-09 20:49:47

【问题描述】：

我在收到响应时初始化了数组人工授精[]，但它没有显示或加载表中的记录。当我单击按钮时，它调用函数 viewRecords 并成功发送 HTTP 请求，但未加载到表中。

<div id="ArtificialInsemination" class="container">
        <button v-on:click="viewRecords">View Record</button>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Cow Id</th>
                <th>Bull Name</th>
                <th>Semen Origin</th>
                <th>Insemination Time</th>
                <th>Pd Delivery Date</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for ="artificialInseminationRecord in artificialInseminationRecords">
                <td> artificialInseminationRecord.cowId </td>
                <td> artificialInseminationRecord.bullUsedName </td>
                <td> artificialInseminationRecord.semenOrigin </td>
                <td> artificialInseminationRecord.inseminationTime </td>
                <td> artificialInseminationRecord.pdStatusDate </td>
            </tr>
            </tbody>
        </table>
    </div>

这是vue

  <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>

<script>
    //class initialization

    var ArtificialInsemination = new Vue(
        el:'#ArtificialInsemination',
        data: 
            url:'http://localhost/dairyfarm/index.php',
            artificialInseminationRecords: []

        ,
        //invoke methods
        methods: 
          viewRecords:function () 
              var data = new FormData()
              data.append('function','viewRecords')
              axios.post(this.url,data)
                  .then( function (response ) 
                  this.artificialInseminationRecords = response.data.data
              ).catch(function (error) 

              )

            ,
            created: function()
              this.viewRecords()

            
        
    )

</script>

【参考方案1】：

你有一个范围问题，回调中的this 指的是回调的执行上下文，而不是 Vue 实例。您需要将 this 分配给回调之外的内容：

// assign this to self
var self = this;
axios.post(this.url,data)
  .then( function (response ) 
      self.artificialInseminationRecords = response.data.data
).catch(function (error) 

)

或者使用不创建自己的执行上下文的arrow function：

axios.post(this.url,data)
  .then( response => 
      this.artificialInseminationRecords = response.data.data
).catch(function (error) 

)

【参考方案2】：

您决定使用created 事件，但您将其定义为方法。 :)

看看这个样本： Async Data Mutation inside of Created Event

【参考方案3】：

我们只需要像这样添加绑定

   viewRecords:function () 
          var data = new FormData()
          data.append('function','viewRecords')
          axios.post(this.url,data)
              .then( function (response ) 
              this.artificialInseminationRecords = response.data.data
          .bind(this)).catch(function (error) 

          )

        

【讨论】：

如果您使用的是 ES2015，我建议您使用箭头功能选项。引入它是为了防止你不得不到处绑定this，这可能有点冗长。