Vue.js：数据不会随变化而更新

Question

我有一个 Laravel、Vue.js2 和 Pusher 堆栈。在 created() 中，我可以订阅推送频道并收听它。我什至可以在控制台中记录事件数据，但是，我无法在 FE 的数据值中设置它。有人知道为什么吗？

    <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>

有人知道一旦推送者发送消息后如何更新/重新渲染 {{price.value}}？？

PS：在 raisePrice() 方法上它会改变（每次点击按钮）

Answer 1

我认为这是上下文问题（this 关键字）。

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

您应该使用箭头功能...

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

...或老派thatlifehack：

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