Question

我正在根据条件渲染两个文本，并能够根据条件将方法传递给click事件。默认文本为“添加到集合”，因为最初的hasPaid属性为false。付款后，我想将该属性设置为true

函数addToCollection首先打开一个模式，在该模式上，将执行handlePayment函数。我已经能够使用v-on =“”有条件地渲染div以显示“添加到集合”或“下载”。我还从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函数可以正常工作。

Answer 1

这部分的最后一部分会出现问题：

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

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

您可以通过将其“包装”在函数中来对其进行修复：

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

我在示例中使用了箭头功能，但您可以根据需要使用常规功能。

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

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

如果您确实要使用单个<div>，则可以将click逻辑放入方法中。所以：

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

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

然后在组件的方法中：

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

使用click事件条件渲染，组件渲染功能中可能会有无限的更新循环

1 个答案: