Die Vorlage kann den Inhalt der berechneten Eigenschaft nicht erfassen, der Lebenszyklus-Hook kann ihn jedoch normal aufzeichnen

Question

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.

Dies ist die Funktion, die ich geschrieben habe:

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

Dies ist der Lebenszyklus-Hook (beforeMount), der erfolgreich Daten abruft:

        console.log(this.products)
    }

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.

Wie kann dieses Problem gelöst werden? Vielen Dank im Voraus für Ihre Hilfe!

Answer 1

vue/no-async-in-computed-properties

属性在模板中没有被捕获，但生命周期钩子可以通过计算属性获取数据

你在控制台中看到的原因是因为大多数现代浏览器将对象作为实时数据记录（一旦对象更新，控制台也会更新）。所以你在控制台中看到的不是console.log执行时对象的值，而是稍后的值。你可以通过使用console.log(JSON.parse(JSON.stringify(this.products)))来确认这一点...

为了解决这个问题，使用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
  }
},