我正在尝试在 vue.js 中创建一个元素，这样当我更新我的购物车时，它会显示一条警告，其中包含添加/更新到购物车的商品。因此，如果我添加一辆新车，它会显示上次添加的汽车。
cars: [
{ name: 'Porsche', quantity: 2},
{ name: 'Ferrari', quantity: 1},
{ name: 'Toyota', quantity: 3}
]
到
cars: [
{ name: 'Porsche', quantity: 2},
{ name: 'Ferrari', quantity: 1},
{ name: 'Toyota', quantity: 3},
{ name: 'Mustang', quantity: 1}
]
会显示
<div>
You have 1 x Mustang in Cart
</div>
但是如果我更新购物车中已有的汽车数量，它会显示最后一辆更新的汽车。
cars: [
{ name: 'Porsche', quantity: 2},
{ name: 'Ferrari', quantity: 1},
{ name: 'Toyota', quantity: 3}
]
到
cars: [
{ name: 'Porsche', quantity: 2},
{ name: 'Ferrari', quantity: 1},
{ name: 'Toyota', quantity: 4}
]
会显示
<div>
You have 4 x Toyota in Cart
</div>
到目前为止，我让它在 this answer 中工作
new Vue({
el: '#app',
data: {
cars: [
{ name: 'Porsche', quantity: 2},
{ name: 'Ferrari', quantity: 1},
{ name: 'Toyota', quantity: 3}
]
}
});
Vue.component('car-component', {
props: ["car"],
data: function() {
return {
lastAdded:''
}
},
template: `
<div>
You have {{lastAdded.quantity}} x {{lastAdded.name}} in Cart
</div>`,
watch: {
car: {
handler: function(newValue) {
this.lastAdded = newValue;
},
deep: true
}
}
});
html
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<body>
<div id="app">
<p>Added to Cart:</p>
<car-component :car="car" v-for="car in cars"></car-component>
</div>
</body>
重点是，现在它只检测购物车中是否已经有元素并更改数量，但不会检测添加新车的时间。我试着和另一个观察者一起玩，但没有用。提前致谢!
最佳答案
嗯，我该怎么做？
在我看来我们有一个对象数组，我们正在跟踪最近添加或修改的对象。当然。
所以，我想我只想跟踪最近修改的对象并渲染它。
首先是 html:
<div id="app">
<p>Added to Cart:</p>
<car-component :car="latestCar"></car-component>
</div>
和 vue 实例:
new Vue({
el: '#app',
data: {
cars: [
{ name: 'Porsche', quantity: 2},
{ name: 'Ferrari', quantity: 1},
{ name: 'Toyota', quantity: 3}
],
latestCar: {}
},
methods: {
updateLatestCar(car) {
this.latestCar = car;
//call this method from any other method where updates take place
//so if would be called from your addCar method and your updateCar method
//(which I assume exist even though they are not shown in your code)
}
}
});
Vue.component('car-component', {
props: ["car"],
data: function() {
return {
lastAdded:''
}
},
template: `
<div>
You have {{lastAdded.quantity}} x {{lastAdded.name}} in Cart
</div>`,
watch: {
car: {
handler: function(newValue) {
this.lastAdded = newValue;
},
deep: true
}
}
});
如果您要通过 Vue 实异常(exception)部的某种方法修改对象数组，那么这将需要一些额外的考虑。
但似乎为此你在 Vue 实例方法 block 中有一些方法是这样的:
addCar(car) {
this.cars.push(car);
this.updateLatestCar(car);
},
updateCar(index, car) {
this.cars[index] = car;
this.updateLatestCar(car);
}
关于vue.js - Vue - 深入观察对象数组的变化，无论是添加对象还是修改对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52314136/