使用点击事件条件渲染的组件渲染函数中可能存在无限更新循环答案

【问题标题】：You may have an infinite update loop in a component render function using click event conditional rendering使用点击事件条件渲染的组件渲染函数中可能存在无限更新循环
【发布时间】：2019-08-08 12:37:40
【问题描述】：

我正在根据条件渲染两个文本，并且能够根据条件将方法传递给点击事件。默认文本为 ADD TO COLLECTION，因为最初 hasPaid 属性为 false。付款后，我想将该属性设置为 true

函数addToCollection首先打开一个modal，在modal上，实现handlePayment函数。我已经能够有条件地渲染 div 以使用 v-on="" 显示添加到收藏或下载。我还从 handlePayment 函数返回 hasPaid 属性。

<div class="float-right peexo-faded-text card-inner-text"  :face="face" v-on="!hasPaid ? {click: addToCollection} : {click: handleDownload(face)}">
                                       {{!hasPaid ? 'ADD TO COLLECTION': 'DOWNLOAD' }}
                                    </div>


 data: function () {
            return {
                hasPaid: false,
            }
},
addToCollection(){
                this.showcollectionModal = true;
            },
            handlePayment(){
                this.showcollectionModal = false;
                let accept = true;
                this.showpaymentsuccessmodal = true;
                //this.hasPaid = true;

                return {
                    hasPaid: accept
                }

            },

我希望能够在 handlePayment 函数上设置 hasPaid 属性，以便渲染函数能够选择它，以便 handleDownload 函数可以工作。

【问题讨论】：

标签： vuejs2

【解决方案1】：

这一点的最后一段会有问题：

v-on="!hasPaid ? {click: addToCollection} : {click: handleDownload(face)}"

当hasPaid 为true 时，它会立即调用handleDownload 方法。也就是说，它将在渲染期间调用，而不是在单击 <div> 时调用。

您可以通过将其“包装”在一个函数中来修复它：

{click: () => handleDownload(face)}

我在示例中使用了箭头函数，但如果您愿意，也可以使用普通函数。

我个人不会尝试使用 v-on 的对象形式来做到这一点。

我的第一直觉是您应该考虑只使用两个 <div> 元素并使用 v-if 来决定显示哪个。

如果您确实想使用单个<div>，我会将点击逻辑放在一个方法中。所以：

<div class="..." :face="face" @click="onDivClick(face)">

请注意，尽管与您定义点击侦听器的方式在语法上很相似，但这不会立即调用该方法。

然后在组件的方法中：

methods: {
  onDivClick (face) {
    if (this.hasPaid) {
      this.handleDownload(face)
    } else {
      this.addToCollection()
    }
  }
}

【讨论】：