javascript - Vue.js 卡片中的某些项目没有反应性
问题描述
我已经为这个问题苦苦挣扎了好几天了。我希望有人可以帮助我。
我有一张结帐卡,我正在尝试更新数量和总价。:
父组件:
<template>
<div>
<upsell-checkout-product
:product="product"
:index="index"
@remote="remove"
@increment="increment"
@decrement="decrement"
></upsell-checkout-product>
</div>
</template>
<script>
export default {
props: {
runId: {
type: String,
default: null
},
card: {
type: Array,
default: null
},
customer: {
type: Object,
default: null
},
order: {
type: Object,
default: null
}
},
data() {
return {
localCard: []
}
},
mounted() {
this.localCard = this.card;
},
methods: {
increment(index) {
Vue.set(this.localCard[index], 'quantity', this.localCard[index].quantity+=1);
},
decrement(index) {
if(this.localCard[index].quantity > 0) {
this.localCard[index].quantity--;
}
},
remove(index) {
this.localCard.splice(index, 1);
}
}
}
</script>
子组件:
<template>
<div class="text-green">
<div class="flex center p-2">
<div class="w-1/3">
<img class="rounded-full h-24 w-24 border border-green"
:src="'/storage/articles/' + product.article.image_url"
v-if="product.article.image_url"
/>
</div>
<div class="w-2/3">
<h3>{{ product.article.name }}</h3>
<h5 class="mt-2">Bestaalstatus</h5>
<div>
<div class="bg-red text-white text-xs mt-2 rounded p-1 w-1/3">
Niet voldaan
</div>
</div>
</div>
</div>
<div class="center justify-between p-2 border-t border-b border-dotted border-green">
<div class="w-1/5">
<div class="cursor-pointer" @click="$emit('remove', index)">
x
</div>
</div>
<div class="center w-2/5">
<div class="cursor-pointer" @click="$emit('decrement', index)">
-
</div>
<input type="number"
class="input-main w-1/2 ml-1 mr-1 h-8"
v-model="product.quantity">
<div class="cursor-pointer" @click="$emit('increment', index)">
+
</div>
</div>
<div class="flex justify-end w-2/5">
<div v-if="product.article.member_discount_percentage">
<p class="text-sm">€ <strike>{{ price }}</strike> - € {{ discountPrice }}</p>
</div>
<div v-else>
<p class="text-sm">€ {{ discountPrice }}</p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['product', 'index'],
computed: {
price: function() {
return (this.product.quantity * this.product.article.price).toFixed(2);
},
discountPrice: function() {
return (this.product.quantity * this.product.article.discount_price).toFixed(2);
}
}
}
</script>
问题是我已经从服务器获取的卡片项目在 localCard 中是反应性的,但是尚未从服务器获取但在整个结帐过程中添加的项目不是......
我已经尝试制作一个 JsFiddle,但我无法重现该问题。显然这是一个反应性问题,但我不知道我应该如何解决这个问题。
我在这里需要一些帮助,谢谢!
解决方案
终于我修好了!
当我将新项目推送到数组并执行此操作时:
.push(Object.assign({}, article));
它突然起作用了!感谢您的帮助。
推荐阅读
- c# - 如何从数据库中读取位值并将该值设置为布尔会话变量(如果不为空)
- chat - 关于 Angular 8 sendbird 聊天的建议
- web-scraping - Scrapy init 返回一个 None
- facebook - Facebook 和公共页面内容
- python - 将数据框的默认索引更改为列
- c++ - 使用 dtostrf 将多个浮点值转换为字符串
- scala - 使用 mapGroupsWithState 进行 Spark 流式处理
- macos - 找不到符号 libboost_regex-mt.dylib
- html - 当画外音打开时,html 日期和时间选择器不会在 ios 浏览器中打开
- c# - Xamrin.Forms 尝试使用 Firebase 实时数据库创建电子邮件检查