Question

我有一个父组件（MyCart），用于显示用户购物车中的商品以及一些结帐选项。这些选项之一是输入促销代码，它是子组件。

我设置的方式是PromoCode组件具有一个文本字段，用户可以在其中输入代码。提交时将发出一个事件。 MyCart组件侦听此事件，然后执行此操作（检查促销代码是否有效等），然后成功完成后，将促销代码的详细信息作为道具发送给子组件。

问题是该道具最初为空（因为尚未输入促销代码），因此，我已经使用了不同的布尔检查来显示错误div或在提示时隐藏促销代码字段输入了代码，但在处理完事件后通过道具后，代码无法准确更新。

这是我的代码中与这两个组件相关的摘要。

MyCart.vue

<promo-code :promoCode="promoCode"
            @promo-code-applied="applyPromoCode($event)">
</promo-code>

And in the Script, applyPromoCode(code) basically sets checks to see if the promo 
code is valid, how much discount to apply to the total, and then sets 
this.promoCode = code so that the code is passed as a prop to the child component.

PromoCode.vue

In the Template

<input v-model="promoCodeInput">
<button @click="applyPromoCode()">

In the Script

props: {
  promoCode: {
    type: Object,
    default: null
  }
},
data () {
  return {
    promoCodeInput: null,
    showPromoCodeField: true,
    showError: false
  }
},
methods: {
  applyPromoCode() {
    this.$emit('promo-code-applied', this.promoCodeInput)
    if (this.promoCode) // this is not being satisfied, even though it should
      this.showPromoCodeField = false
    else // this is the block that is always hit
      this.showError = true
  }
}

任何想法都会受到赞赏。

Answer 1

弄清楚了伙计们！我使用了观察者。因此，我所做的就是将执行检查的代码（if / else东西）分离到另一个名为checkPromoCode的函数中，然后观察道具的更改，并在更改后调用了checkPromoCode函数。

代码：

In method:
checkPromoCode() {
if (this.promoCode)
  this.showPromoCodeField = false
else
  this.showError = true
}

watch: {
  promoCode: "checkPromoCode"
}

发出事件后如何处理道具状态的变化？

1 个答案: