Question

我的计算：

<span @click="addFavoritePlace(place.id)" class="favorite-btn active" v-if="place.is_favorited == true">
                        <i class="icon-heart"></i>
                    </span>
                    <span @click="addFavoritePlace(place.id)" class="favorite-btn" v-else>
                        <i class="icon-heart"></i>
                    </span>

和我的正面代码：

<table style="width: 100%; border: inherit; border-collapse: collapse;" border="1">
    <tbody>
    <tr>
        <td style="width: 100%;  background-color: #bc8f8f; -webkit-print-color-adjust: exact; height: 30px" colspan="6"><b>Header</b></td>

    </tr>
    <tr>
        <td style="width: 33%;"><b>Header</b></td>
        <td style="width: 45%;"><b>Description</b></td>
        <td style="width: 5%;"><b>Time</b></td>
        <td style="width: 5%;"><b>Qty.</b></td>
        <td style="width: 5%;"><b>Price</b></td>
        <td style="width: 5%;"><b>Total</b></td>
    </tr>
    REPLACE_VALUE
    <tr>
        <td colspan="4"></td>
        <td><b>Total :</b> </td><td>PLH__GRAND_TOTAL</td>
        </tr>
    </tbody>
</table>

我需要再次调用计算中的过滤函数。要激活收藏夹按钮。

Answer 1

无需强制更新计算值。如果更改了所需的值，将始终自动重新计算计算出的属性。

因此，根据您的情况，您需要更改singlePlaces，并且filteredPlaces将自动更新。

在文档（https://vuejs.org/v2/guide/reactivity.html#For-Arrays）中看到有关数组和对象反应性的事情。

在您的示例中，添加喜欢的地方时未包含代码，但是您可能需要执行以下操作：

Vue.set(this.singlePlaces, indexOfItem, updatedItem)

Answer 2

首先，不用标记，您可以节省两倍的事件处理量，减少两倍的DOM节点创建，以及减少两倍的重新计算和重绘，只需切换类即可。另外，我不确定在@click事件内调用函数是否不会立即触发此函数，以防万一将其包装到匿名函数中。另外，请注意，我将整个place.id对象引用传递给place，而不是addFavoritePlace：

<span
    @click="() => addFavoritePlace(place)"
    class="favorite-btn"
    :class="{active: place.is_favorited}">
        <i class="icon-heart"></i>
</span>

第二，filteredPlaces代码的一部分没有意义，因为您正在设置未在其他地方使用或返回的变量，因此垃圾收集器无论如何都会立即将其杀死。相反，您可以使用：

computed: {
  filteredPlaces () {
    const search = this.search.toLowerCase()
    return this.singlePlaces.filter((p) => {
        return p.name.toLowerCase().includes(search)
    });
  }
}

最后，您可以只更新singlePlaces个项目，它们将自动影响filteredPlaces，无需执行任何特殊操作，以防万一place中没有is_favorited属性，您可以{ {1}}处于初始状态，或强制Vue使用map方法跟踪其更新。而且，正如我所说，我将传递整个set引用而不是place，因此我们不必在堆栈中再次找到此元素：

id

Vue.js强制计算属性重新计算？

2 个答案: