テンプレートは計算されたプロパティの内容をキャプチャできませんが、ライフサイクルフックはそれを通常どおり記録できます。

Question

ショッピング カートの内容を妨げずに商品を選択して注文できるオンライン ストアを作成しています。私の実装方法は、カートの商品と個々の商品のページを共有することです。 productID パラメータが設定されているかどうかを確認し、設定されている場合は別のデータを使用します。

これは私が書いた関数です:

 計算: {
        製品: function() {
            if ( this.$route.query.pid ) {
                var product = [{}]
                axios.get(`/api/products/${this.pid}`).then(response => {
                    製品[0].id = 応答.データ[0].id
                    製品[0].name = 応答.データ[0].name
                    製品[0].単位 = 応答.データ[0].単位
                    製品[0].イメージ = 応答.データ[0].製品イメージ[0].イメージ
                    製品[0].価格 = 応答.データ[0].価格
                    製品[0].数量 = 1
                })
                戻り値 Object.assign(product)
            } それ以外 {
                this.$store.state.cart を返す
            }
        }
    }、

これは、データを正常に取得するライフサイクル フック (beforeMount) です:

 beforeMount() {
        console.log(this.products)
    }

ここでの問題は、products 属性がテンプレート内で空であると見なされることです。クエリ パラメーターを指定せずにページにアクセスすると、すべてが正常に動作しますが、個々の製品の計算されたデータが見つかりません。

この問題を解決するにはどうすればよいですか?よろしくお願いいたします。

Answer 1

vue/no-async-in-computed-properties

プロパティはテンプレートにはキャプチャされませんが、ライフサイクル フックは計算されたプロパティを通じてデータを取得できます

これがコンソールに表示される理由は、ほとんどの最新のブラウザが オブジェクトをライブ データとしてログに記録するためです (オブジェクトが更新されると、コンソールも更新されます)。したがって、コンソールに表示されるのは、console.log が実行されたときのオブジェクトの値ではなく、後の値です。これは、console.log(JSON.parse(JSON.stringify(this.products)))...

を使用して確認できます。

この問題を解決するには、computed の代わりに watch

を使用します。 リーリー