Question

我已经在收到的响应中初始化了数组ArtificialInsemination []但它没有显示或加载表中的记录。当我单击按钮时，它会调用函数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>

Answer 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) {

})

Answer 2

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

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

Answer 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) {

          })

        }

V-用于在控制台上取出后不显示记录

3 个答案: