Laravel Vue js Response Result Результат не обновляется после вызова axios

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>

Я получаю данные Array через api call.but, когда всплывающее окно не работает должным образом. Я хочу обновить this.sharedPriceCount при открытии всплывающего окна, чтобы отобразить всплывающее содержимое. Без обновления страницы.

Кто-нибудь может мне помочь в этом?

Answer 1

Если result и loading обновлены, пожалуйста, не обращайте внимания на следующее:

У меня были проблемы с this. в функции при вызове axios.Решил это, определив var _self = this; перед вызовом axios и используя _self в функции ответа