Axios调用后Laravel Vue js响应结果未更新

Question

我有 vue 组件。在 axios 响应计数器未在弹出窗口更新之后。在创建的方法上调用 showInterest 函数。

    <template>
  <span class="interested-button">
    <a data-toggle="modal" data-target="#buyModel" @click="showInterest(idea_id, owner_id)">
      <i class="fa fa-usd" aria-hidden="true"></i> Interested to buy?
    </a>

    <div
      class="modal fade"
      id="buyModel"
      tabindex="-1"
      role="dialog"
      aria-labelledby="buyModelLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="ideabuy">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="buyModelLabel">How much you are willing to spend?</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          {{ sharedPriceCount }}
          <template v-if="sharedPriceCount == 0">
            <form @submit.prevent="saveIdeaPrice">
              <div class="modal-body">
                <div class="form-group">
                  <input type="text" v-model="price" class="form-control">
                </div>
              </div>
              <div class="modal-footer">
                <button type="submit" class="btn btn-success">Save</button>
              </div>
            </form>
          </template>
          <template v-else>
            <div class="modal-body">
              <div class="form-group">You have already shown interest for this Idea.</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </span>
</template>

<script>
import mixins from "../mixins";

export default {
  name: "buyProduct",
  mixins: [mixins],
  props: ["input_name", "idea_id", "owner_id"],
  data() {
    return {
      result: [],
      loading: false,
      price: 0,
      sharedPriceCount: 0
    };
  },
  created() {},
  mounted() {},
  methods: {
    saveIdeaPrice() {
      axios
        .post("/idea-buy-price", {
          id: this.idea_id,
          owner: this.owner_id,
          price: this.price
        })
        .then(res => {
          this.loading = false;
        })
        .catch(res => (this.loading = false));
    },
    showInterest(idea_id, owner_id) {
      let _self = this;
      axios
        .get("/idea-buy-price/" + idea_id + "/" + owner_id)
        .then(
          function(response) {
            _self.result = JSON.stringify(response.data.data);
            _self.sharedPriceCount = response.data.data.length;
            console.log(_self.sharedPriceCount);
            _self.loading = false;
          }.bind(_self)
        )
        .catch(
          function(error) {
            _self.loading = false;
          }.bind(_self)
        );
    },
    updateCall() {}
  }
};
</script>

我通过 api 调用获取数组数据。但在弹出窗口时它无法正常工作。我想在弹出窗口打开时更新 this.sharedPriceCount。以显示弹出内容。不刷新页面。

有人可以帮我解决这个问题吗？

Answer 1

如果result 和loading 已更新，请忽略以下内容：

我在 axios 调用的函数内遇到了 this. 问题。 通过定义解决它 var _self = this; 在 axios 调用之前并在响应函数中使用 _self