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

Posted 2023-02-16

【中文标题】Vue.js：数据不会随变化而更新

【英文标题】：Vue.js: Data is not updating on change

【发布时间】：2021-12-12 11:18:09

【问题描述】：

我有一个 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() 方法上它会改变（每次点击按钮）

【参考方案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;
    );

【讨论】：

不，我一直在订阅并接收事件，它会写入 this.price.value，因为如果我 console.log 它会显示出来.. 但是，在 FE 上不会改变

编辑了我的答案，也许这会有所帮助

太棒了！现在可以了，谢谢。 （使用箭头功能）