Javascript 为什么Vue.js:类依赖于列表项属性而不工作？

我会很简短的。这是我的html：

<tr v-for="product in products"
:class="{'bg-red': product.toWrite }" :key="product.name">
  <td @click="setObjectToWrite(product.name)" class="show-hover">
    <u>{{product.name}}</u>
  </td>
</tr>

所以，处理程序正在工作，我看到

products

array已更新-我在控制台中看到了这一点。 但是css并没有改变。（如果我更改了

.name

，css会进行diplay更改）

我的

产品

数组最初看起来如下：[{name:'some name'}，…]

我很困惑。我想我误解了什么

---

多亏了@Ross Allen，问题解决了。 要使其工作，我需要一些小的更改：

setObjectToWrite (product) {
    let name = product.name
    let products = [...this.products] // we should treat data-props as immutable, if we need to add props to objects.
    products.forEach(p => {
    ...

---

如果

toWrite

是一个新属性，则Vue无法检测其添加内容。请参阅：“Vue无法检测属性的添加或删除”

我建议将

data

中的值视为不可变的，对于这种情况，这意味着在需要添加属性时创建新对象：

setObjectToWrite（名称）{
const nextProducts=this.products.map（p=>{
如果（p.name==name）{
//创建一个新对象，Vue将看到该对象并重新渲染
返回{
P
托维特：没错，
};
}否则{
返回p；
}
})
this.products=nextProducts
},

如果您提供一个

：key=“…”

属性，比如？@NiklasE的顶部示例。我试过了。看看更新后的代码，没有任何变化。第1段-是的，我自己刚刚达到了这一点。第2段-非常感谢，它解决了很多问题。

setObjectToWrite (product) {
    let name = product.name
    let products = [...this.products] // we should treat data-props as immutable, if we need to add props to objects.
    products.forEach(p => {
    ...