<p>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. </p> <p>Ini ialah fungsi yang saya tulis: </p> <pre class="brush:js;toolbar:false;"> 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 } } }, </pra> <p>Ini ialah cangkuk kitaran hayat (beforeMount) yang berjaya memperoleh data: </p> <pre class="brush:js;toolbar:false;"> console.log(this.products) } </pra> <p>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. </p> <p>Bagaimana untuk menyelesaikan masalah ini? Terima kasih terlebih dahulu atas bantuan anda! </p>

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