為什么 Vue.js:class 在依賴於列表項屬性時不起作用？

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 會更改顯示）。

我的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 反應性：“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
  },