Saya merender dua teks berdasarkan suatu kondisi dan dapat meneruskan metode ke acara klik berdasarkan ketentuan tersebut. Teks defaultnya adalah ADD TO COLLECTION karena awalnya properti hasPaid salah. Setelah pembayaran dilakukan, saya ingin mengatur properti itu menjadi true

Fungsi addToCollection pertama membuka modal, pada modal, fungsi handlePayment diimplementasikan. Saya telah dapat membuat div secara kondisional untuk menunjukkan TAMBAHKAN KE KOLEKSI atau UNDUH menggunakan v-on="". Saya juga mengembalikan properti hasPaid dari fungsi handlePayment.

<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
                }

            },

Saya ingin dapat mengatur properti hasPaid pada fungsi handlePayment agar fungsi render dapat mengambilnya, sehingga fungsi handleDownload kemudian dapat berfungsi.

0
JimloveTM 8 Agustus 2019, 15:37

1 menjawab

Jawaban Terbaik

Bagian terakhir dari bit ini akan menjadi masalah:

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

Ketika hasPaid adalah true ia akan segera memanggil metode handleDownload. Artinya, itu akan dipanggil selama render, bukan saat <div> diklik.

Anda dapat memperbaikinya dengan 'membungkusnya' dalam suatu fungsi:

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

Saya telah menggunakan fungsi panah dalam contoh saya, tetapi Anda dapat menggunakan fungsi normal jika Anda mau.

Secara pribadi saya tidak akan mencoba melakukan ini menggunakan bentuk objek v-on.

Naluri pertama saya adalah Anda harus mempertimbangkan hanya memiliki dua elemen <div> dan menggunakan v-if untuk memutuskan mana yang ditampilkan.

Jika Anda memang ingin menggunakan <div> tunggal, saya akan menempatkan logika klik dalam sebuah metode. Jadi:

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

Perhatikan bahwa terlepas dari kesamaan sintaksis yang terlihat dengan cara Anda mendefinisikan pendengar klik, ini tidak akan segera memanggil metode.

Kemudian dalam metode untuk komponen:

methods: {
  onDivClick (face) {
    if (this.hasPaid) {
      this.handleDownload(face)
    } else {
      this.addToCollection()
    }
  }
}
0
skirtle 8 Agustus 2019, 13:03