<p>Ich erstelle einen Online-Shop, in dem Sie Produkte bestellen können, ohne den Inhalt Ihres Warenkorbs zu beeinträchtigen. Die Art und Weise, wie ich es umsetze, besteht darin, eine Seite für Warenkorbartikel und einzelne Produkte zu teilen. Es prüft, ob der Parameter „productID“ gesetzt ist und verwendet in diesem Fall andere Daten. </p> <p>Dies ist die Funktion, die ich geschrieben habe: </p> <pre class="brush:js;toolbar:false;"> Produkte: function() { if ( this.$route.query.pid ) { var Produkt = [{}] axios.get(`/api/products/${this.pid}`).then(response => { Produkt[0].id = Antwort.Daten[0].id Produkt[0].name = Antwort.Daten[0].Name Produkt[0].units = Antwort.Daten[0].Einheiten Produkt[0].image = Antwort.Daten[0].Produkt_Bild[0].Bild Produkt[0].Preis = Antwort.Daten[0].Preis Produkt[0].Menge = 1 }) return Object.assign(product) } anders { Geben Sie this.$store.state.cart zurück } } }, </pre> <p>Dies ist der Lebenszyklus-Hook (beforeMount), der erfolgreich Daten abruft: </p> <pre class="brush:js;toolbar:false;"> console.log(this.products) } </pre> <p>Das Problem besteht nun darin, dass das Produktattribut in der Vorlage als leer betrachtet wird. Wenn ich die Seite ohne Abfrageparameter aufrufe, funktioniert alles einwandfrei, ich kann nur die berechneten Daten für die einzelnen Produkte nicht finden. </p> <p>Wie kann dieses Problem gelöst werden? Vielen Dank im Voraus für Ihre Hilfe! </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
  }
},