Vue.js:数据未根据更改更新
Vue.js: Data is not updating on change
我有一个 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>
有人知道推送者发送消息后 update/re-render {{price.value}} 是什么感觉吗??
PS:在 raisePrice() 方法上它会改变(每次单击按钮)
我认为这是上下文(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);
...或老派 that
生活窍门:
var that = this;
channel.bind("price-raise", function (data) {
that.price.value = data.price;
});
我有一个 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>
有人知道推送者发送消息后 update/re-render {{price.value}} 是什么感觉吗??
PS:在 raisePrice() 方法上它会改变(每次单击按钮)
我认为这是上下文(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);
...或老派 that
生活窍门:
var that = this;
channel.bind("price-raise", function (data) {
that.price.value = data.price;
});