템플릿은 계산된 속성의 내용을 캡처할 수 없지만 라이프 사이클 후크는 이를 정상적으로 기록할 수 있습니다.

Question

저는 장바구니의 내용을 방해하지 않고 제품을 주문할 수 있는 온라인 상점을 만들고 있습니다. 제가 구현한 방법은 장바구니 품목과 개별 상품에 대한 페이지를 공유하는 것입니다. productID 매개변수가 설정되어 있는지 확인하고, 설정된 경우 다른 데이터를 사용합니다.

이것은 제가 작성한 함수입니다:

        제품: 함수() {
            if ( this.$route.query.pid ) {
                var 제품 = [{}]
                axios.get(`/api/products/${this.pid}`).then(응답 => {
                    product[0].id = response.data[0].id
                    제품[0].name = 응답.데이터[0].name
                    product[0].units = response.data[0].units
                    product[0].image = response.data[0].product_image[0].image
                    제품[0].price = 응답.데이터[0].price
                    제품[0].수량 = 1
                })
                Object.ass(제품) 반환
            } 또 다른 {
                this.$store.state.cart를 반환하세요.
            }
        }
    },

이것은 데이터를 성공적으로 얻는 수명 주기 후크(beforeMount)입니다.

        console.log(this.products)
    }

이제 문제는 템플릿에서 제품 속성이 비어 있는 것으로 간주된다는 것입니다. 쿼리 매개변수 없이 페이지에 액세스하면 모든 것이 잘 작동하지만 개별 제품에 대해 계산된 데이터를 찾을 수 없습니다.

이 문제를 어떻게 해결하나요? 도움을 주셔서 미리 감사드립니다!

Answer 1

vue/no-async-in-computed-properties

속성은 템플릿에 캡처되지 않지만 수명 주기 후크는 계산된 속성을 통해 데이터를 얻을 수 있습니다

콘솔에 표시되는 이유는 대부분의 최신 브라우저가 객체를 라이브 데이터로 기록하기 때문입니다(객체가 업데이트되면 콘솔도 업데이트됩니다). 따라서 콘솔에 표시되는 내용은 console.log执行时对象的值，而是稍后的值。你可以通过使用console.log(JSON.parse(JSON.stringify(this.products))) 이를 확인하기 위한 것이 아닙니다...

이 문제를 해결하려면 watch而不是computed

를 사용하세요. 으아악