Vue.js: Data is not updating on change-CodePudding

I have a Laravel, Vue.js2 and Pusher stack. In the created() I'm able to subscribe to pusher channel and listen to it. I can even log the event data in the console, however, I'm not able to set it in the data value on FE. Does anybody know why?

    <template>
  <div class="flex flex-col items-center b p-10 rounded shadow-lg bg-white">
    
    <p class="text-xl text-blueGray-800 leading-relaxed mt-6">Aktuálna cena:</p>
    <div class="flex flex-col items-center justify-evenly w-full mt-3 mb-6">
      <div>
        <h1 class="text-xl md:text-4xl mb-4 font-bold font-heading">
          {{ price.value }} €
        </h1>
      </div>
      <div>
        <a
          href="#"
          class="bg-black"
          @click="raisePrice"
          >Add 100 €</a
        >
      </div>
    </div>
    <hr class="w-full mb-6" />
    
  </div>
</template>

<script>
export default {
  props: ["id", "bidder_id"],
  data() {
    return {
      auction: null,
      price: '',
      newPrice: null,
    };
  },

  created() {
    window.axios.defaults.headers.common = {
      "X-Requested-With": "XMLHttpRequest",
      "X-CSRF-TOKEN": document
        .querySelector('meta[name="csrf-token"]')
        .getAttribute("content"),
    };
    this.fetchPrice();
    

    Pusher.logToConsole = true;

    var pusher = new Pusher("123456789", {
      cluster: "eu",
    });

    var channel = pusher.subscribe(this.id.toString());

    channel.bind("price-raise", function (data) {
      this.price.value = data.price;
    });
  },

  methods: {
    fetchPrice() {
      axios.get(`/auction/${this.id}`).then((response) => {
        this.auction = response.data;
        this.price = {"value": response.data.actual_price};
        
      });
    },

    raisePrice() {
      this.newPrice = this.price.value   100;
      this.price.value = this.price.value   100;
      const req_data = {
        actual_price: this.newPrice,
        id: this.id,
        bidder_id: parseInt(this.bidder_id),
      };
      axios
        .post("/auction/raise/"   this.id, req_data)
        .then((response) => {
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

Does anybody know how it suppose to be to update/re-render the {{price.value}} once pusher shoots a message??

PS: on raisePrice() method it changes (everytime button is clicked)

CodePudding user response：

I thinks this is issue with context (this keyword).

channel.bind("price-raise", function (data) {
      // 'this' reference here is not the reference to vue-component
      this.price.value = data.price;
});

You should either use arrow-function...

channel.bind("price-raise",  (data) =>  this.price.value = data.price);

...or an old-school that lifehack:

var that = this;
channel.bind("price-raise", function (data) {
      that.price.value = data.price;
    });