javascript - 为什么 Vue.js :class not working when it depends on list item property?

Question

我会很矮。这是我的 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>

@onclick处理程序:

  setObjectToWrite (name) {
    // this.products = []
    let products = this.products
    products.forEach(p => {
      if (p.name == name) {
        p.toWrite = true // ignores
        p.name+=' ' // now displays
      }
    })
    console.log('new products', products) // OK
    this.products = products
  },

所以，处理程序正在工作，我看到 products数组已更新 - 我在控制台中看到了这一点。
但是css没有改变。 (如果我更改 .name ，css 会改变 diplay)。
我的 products数组最初看起来像这样: [{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 => {
    ...

Answer 1

如 toWrite是一个新属性，那么 Vue 无法检测到它的添加。见 Vue reactitivy for objects :“Vue 无法检测属性添加或删除”。
我建议处理 data 中的值作为不可变的，对于这种情况，这意味着在需要添加属性时创建新对象:

  setObjectToWrite (name) {
    const nextProducts = this.products.map(p => {
      if (p.name == name) {
        // Creates a new Object, Vue will see this and re-render
        return {
          ...p,
          toWrite: true,
        };
      } else {
        return p;
      }
    })
    this.products = nextProducts
  },