我在vue.js / axios中有一个非常奇怪的问题。
场景1 ：清除我的产品变量 BEFORE 发送HTTP请求（请参阅“＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt; SCENARIO 1”标记）。然后使用新数组设置products变量。 它工作但我们看到一个闪烁（由于HTTP请求持续时间）。 所以我决定清除产品变量 IN 请求。
场景2 ：清除我的产品变量 IN HTTP请求。 （参见“＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆＃1; SCENARIO 2”标记）。
let Cart = {
components: { Product },
data: function() {
return {
products: []
}
},
template: "<div><h3>Cart:</h3>" +
'<product @productChanged="updateProductsCart(product)"' +
'style="display: inline-block; max-width: 90px;" v-for="product in products"' +
':id="product.id" :name="product.name" :priceWithCurrency="product.priceWithCurrency"' +
':initQuantity="product.initQuantity" :picture="product.picture" :hasDeletedBtn="true"' +
':isProductRefreshAuto="false"></product>' +
"</div>",
methods: {
getAllProducts: function () {
let $this = this;
$this.clearProductsList();<<<<< SCENARIO 1
tdtdapi.get( '/cart/products/me', configs
).then(function (response) {
$this.clearProductsList();<<<<< SCENARIO 2
console.log("getAllProducts.then >")
console.log(response)
let products = [];
for( let i = 0, l = response.data.length; i < l; i++ ){
let product = response.data[i],
productToAdd = {
"name": "Product ",//todo delete raw value
"priceWithCurrency": 45
};
//todo: create a class Product
for( let prop in product ){
if( prop === "product" ) productToAdd.id = product[prop];
if( prop === "name" ) productToAdd.name = product[prop];
if( prop === "quantity" ) productToAdd.initQuantity = product[prop];
// if( prop === "description" ) productToAdd.description = product[prop];
if( prop === "price" ) productToAdd.priceWithCurrency = product[prop];
if( prop === "picture" ) productToAdd.picture = product[prop];
}
products.push(productToAdd);
}
$this.setProducts(products);
}).catch(function (error) {
console.log(error);
});
},
updateProductsCart: function( product ) {
console.log("updateProductsCart >")
console.log(product)
this.getAllProducts();
},
setProducts: function(products) {
console.log("setProducts >")
console.log(products)
this.products = products;
console.log(this.products)
},
clearProductsList: function() {
this.products.splice( 0, this.products.length );
}
},
mounted() {
this.getAllProducts();
},
computed: {
}
};
var app = new Vue({
el: "#app",
components: {
"ProductsList": ProductsList,
"Cart": Cart
}
});
如果有帮助，有Product组件：
let Product = {
data() {
return {
quantity: this.initQuantity,
price: this.getPriceWithoutSymbols()
}
},
props: {
id: { type: Number, required: true },
name: { type: String, required: true },
description: { type: String, default: "" },
priceWithCurrency: { type: Number, required: true },
initQuantity: { type: Number, default: 0 },
picture: { type: String, default: "" },
hasDeletedBtn: { type: Boolean, default: false },
isProductRefreshAuto: { type: Boolean, default: true }
},
template: '<article :id="id">' +
'<div>{{ name }}</div>' +
'<div>{{ description }}</div>' +
'<div>{{ price }}</div>' +
'<div><img :src="picture"/></div>' +
'<div>Quantity: {{ quantity }}</div>' +
'<div>Total for this product: {{ totalPrice }}</div>' +
'<div>' +
'<button @click="decrementQuantity" type="button">-</button>' +
'<button @click="incrementQuantity" type="button">+</button>' +
'<br /><button v-if="hasDeletedBtn" @click="deleteProductQuantity" type="button">Delete product</button>' +
'</div>' +
'</article>',
methods: {
addQuantity( valueToAdd ){
//if quantity 0 to 1 ==> post
if( (this.quantity === 0) && (valueToAdd >= 1) ){
this.postProductQuantity(valueToAdd);
}
//if quantity 1 to 0 ==> delete
else if( (this.quantity === 1) && (valueToAdd === -1) ){
this.deleteProductQuantity();
}
//else ==> put
else{
this.putProductQuantity(valueToAdd);
}
},
postProductQuantity(valueToAdd){
console.log("POST")
let $this = this;
tdtdapi.post( '/cart/products/me', querystring.stringify({
product: $this.id,
quantity: valueToAdd
}), configs
).then(function (response) {
console.log(response);
$this.setQuantity(response.data.quantity);
}).catch(function (error) {
console.log(error);
});
},
putProductQuantity(valueToAdd){
console.log("PUT")
let $this = this;
tdtdapi.put( '/cart/products/me', querystring.stringify({
product: $this.id,
quantity: ($this.quantity + valueToAdd)
}), configs
).then(function (response) {
console.log(response);
$this.setQuantity(response.data.quantity);
}).catch(function (error) {
console.log(error);
});
},
deleteProductQuantity(){
console.log("DELETE")
let $this = this;
tdtdapi.delete( '/cart/products/me/' + this.id, configs
).then(function (response) {
console.log(response);
$this.setQuantity(0);//todo: use v-show to hide product when (this.quantity === 0)
}).catch(function (error) {
console.log(error);
});
},
emitChanged() {
this.$emit( "productChanged" );
},
incrementQuantity(){
this.addQuantity(1);
},
decrementQuantity( product ){
console.log(product)
// if( this.quantity >= 1 ){
// this.addQuantity(-1);
// }
},
getPriceWithoutSymbols(){
//todo: if price contains currency, when need to get only the value
return this.priceWithCurrency;
},
setQuantity( quantity ){
if( this.isProductRefreshAuto ){
this.quantity = quantity;
}
this.emitChanged();
}
},
computed: {
totalPrice: function(){
return (this.quantity * this.price).toFixed(2);
}
}
};
答案 0 :(得分：0)
我看到的一个错误是，你有camelCase中的道具，例如priceWithCurrency，对于这些道具，你必须使用kebab-case传递模板，如here所述：
template: "<div><h3>Cart:</h3>" +
'<product @product-changed="updateProductsCart(product)"' +
'style="display: inline-block; max-width: 90px;" v-for="product in products"' +
':id="product.id" :name="product.name" :price-with-currency="product.priceWithCurrency"' +
':init-quantity="product.initQuantity" :picture="product.picture" :has-deleted-btn="true"' +
':is-product-refresh-auto="false"></product>' +
"</div>",
答案 1 :(得分：0)
问题是我们必须使用道具刷新产品的数据。
基本上当父级（这里是Cart组件）使用props（这里是initQuantity）更改Product的数量时，我们必须对Product实例说他必须更改的是数据（这里是数量）和他的props（initQuantity）。 / p>
因此，我们必须在产品组件的末尾添加观看：
computed: {
...
},
watch: {
initQuantity( newQuantity ){
this.quantity = newQuantity;
}
}
我找到了答案here