关闭语义模态后，Vue UI不使用axios进行更新

Question

我有一个vue，它显示一个基于axios调用的html表，以便在安装期间从db表中获取一个点列表。我还有一个语义模式，我在同一个vue中使用它来向点db表添加记录。在模态的onHidden期间，我进行相同的axios调用以更新html表以显示新记录。但是，html表格没有更新。

<template>
  <div>
    <h1 class="ui header">Points</h1>
    <button class="ui icon button" v-on:click="showModal()">
      <i class="add icon"></i>
    </button>
    <div class="ui modal">
      <div class="header">
        Header Text
      </div>
      <div class="content">
        <div class="ui form">
          <div class="field">
            <label>Date</label>
            <datepicker v-model="newPoint.earnedDate" id="earned_date"></datepicker>
          </div>
          <div class="ui grid">
            <div class="four wide column">
              <div class="ui dropdown" id="name_dd">
                <div class="text">Name</div>
                <i class="dropdown icon"></i>
              </div>
            </div>
            <div class="eight wide column">
              <div class="ui dropdown" id="rule_dd">
                <div class="text">Rule</div>
                <i class="dropdown icon"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="actions">
        <div class="ui black deny button">
          Cancel
        </div>
        <div class="ui positive right labeled icon button">
          Save
          <i class="checkmark icon"></i>
        </div>
      </div>
    </div>
    <table class="ui celled table">
      <thead>
        <tr>
          <th>Date</th>
          <th>Name</th>
          <th>Points</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="point in points">
          <td>{{point.earnedDate}}</td>
          <td>{{point.name}}</td>
          <td>{{point.points}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import axios from "axios";
  import Datepicker from 'vuejs-datepicker';

  export default {
    name: 'earnings',
    components: {
      Datepicker,
    },
    data() {
      return {
        points: [],
        newPoint: {
          earnedDate: "1/1/1970",
          name: "",
          points: ""
        },
        earners: [],
        errors: [],
      }
    },
    methods: {
      showModal: function() {
        $('.ui.modal')
          .modal('show');
      },
    },
    mounted () {
    //THIS CALL UPDATES THE HTML TABLE
      axios
        .get('api/earnings')
        .then(response => (this.points = response.data));

      //Set the modal approve and deny callbacks
      $('.ui.modal')
        .modal({
          closable: true,
          onDeny: function () {
            return;
          },
          onApprove: function () {
            /*****************************************
             * Add the new points using web API
             *****************************************/

            //Get the modal values
            var earned_date = $('#earned_date').val();
            var earner_id = $('#name_dd').dropdown('get value');
            var rule_id = $('#rule_dd').dropdown('get value');

            //Call the post route
            axios
              .post('api/earnings', { earnedDate: earned_date, earnerId: earner_id, ruleId: rule_id})
              .then(response => {})
              .catch(e => {
                console.log(e)
              })

            return;
          },
          onHidden: function () {
          //THIS CALL DOES NOT UPDATE THE HTML TABLE
            axios
              .get('api/earnings')
              .then(response => (this.points = response.data));
          }
        });

      //Load the name dropdown on the add new points modal
      $('.four.wide.column .ui.dropdown')
        .dropdown({
          apiSettings: {
            // this url just returns a list of tags (with API response expected above)
            url: 'api/earners/semantic_dd',
            cache: false
          },
        });

      //Load the rule dropdown on the add new points modal
      $('.eight.wide.column .ui.dropdown')
        .dropdown({
          apiSettings: {
            // this url just returns a list of tags (with API response expected above)
            url: 'api/rules/semantic_dd',
            cache: false
          },
        });
    },
    created: function () {
      // Remove the modal so it doesn't duplicate when the user navigates away from the component
      // and then returns to it
      $('.ui.modal').remove();
    }
  }
</script>

Answer 1

在使用this的axios呼叫期间看起来=>不可用。在mounted开始时，我设置var self = this并在self.points期间使用this.points代替onHidden。绑定到模板现在正在运行。

事后编辑

在Vue.js中，使用this.$data.property-name指向组件的属性。请参阅https://vuejs.org/v2/api/#data

上的文档