Templat tidak boleh menangkap kandungan harta yang dikira, tetapi cangkuk kitaran hayat boleh merakamnya secara normal

Question

Saya sedang mencipta kedai dalam talian di mana anda boleh memilih untuk memesan produk tanpa mengganggu kandungan troli beli-belah anda. Cara saya melaksanakannya ialah berkongsi halaman untuk item troli dan produk individu. Ia menyemak sama ada parameter productID ditetapkan dan jika ya, menggunakan data yang berbeza.

Ini ialah fungsi yang saya tulis:

        produk: function() {
            jika ( this.$route.query.pid ) {
                var produk = [{}]
                axios.get(`/api/products/${this.pid}`).then(respons => {
                    produk[0].id = respons.data[0].id
                    produk[0].nama = respons.data[0].nama
                    produk[0].unit = respons.data[0].unit
                    produk[0].imej = respons.data[0].imej_produk[0].imej
                    produk[0].harga = respons.data[0].harga
                    produk[0].kuantiti = 1
                })
                kembalikan Object.assign(product)
            } lain {
                pulangkan ini.$store.state.cart
            }
        }
    },

Ini ialah cangkuk kitaran hayat (beforeMount) yang berjaya memperoleh data: 
        console.log(this.products)
    }

Masalahnya sekarang ialah atribut produk dianggap kosong dalam templat. Apabila saya mengakses halaman tanpa parameter pertanyaan, semuanya berfungsi dengan baik, saya tidak dapat mencari data yang dikira untuk produk individu. 
Bagaimana untuk menyelesaikan masalah ini? Terima kasih terlebih dahulu atas bantuan anda! 

Answer 1

vue/no-async-in-computed-properties

Sifat tidak ditangkap dalam templat, tetapi cangkuk kitaran hayat boleh mendapatkan data melalui sifat yang dikira

Sebab anda melihatnya dalam konsol adalah kerana kebanyakan penyemak imbas moden log objek sebagai data langsung (sebaik objek dikemas kini, konsol juga dikemas kini). Jadi apa yang anda lihat dalam konsol bukanlah console.log执行时对象的值，而是稍后的值。你可以通过使用console.log(JSON.parse(JSON.stringify(this.products))) untuk mengesahkan ini...

Untuk menyelesaikan masalah ini, gunakan watch而不是computed

data() {
  return {
    products: []
  }
},
watch: {
  '$route.query.pid': {
    handler: function(newValue) {
      if(newValue) {
        axios.get(`/api/products/${newValue}`).then(response => {
          var product = {
            id: response.data[0].id,
            name: response.data[0].name,
            units: response.data[0].units
            image: response.data[0].product_image[0].image
            price: response.data[0].price
            quantity: 1
          }
          this.products = []
          this.products.push(product)
      } else this.products = this.$store.state.cart
    },
    immediate: true
  }
},