javascript - 没有 parseInt，Vue 的共享状态怎么不会更新？

Question

我注意到我的代码中有一个我不理解的小问题，我很想知道它为什么会这样。我猜它是通用的 JavaScript 而不是 Vue。

无论如何，我使用共享状态来表示Books. 但是，当一本书的属性更新时，除非我在过滤要显示的书籍时ready使用，否则不会反映更改。parseInt(filterBook.ready)顺便说一下，filterBook.ready是一个来自数据库的整数。有谁知道为什么这只适用于parseInt()？谢谢。

这不起作用：

<ul>
   <li v-for="book in this.books.all.filter(filterBook => filterBook.ready)">
      <p v-text="book.name">
   </li>
</ul>

这有效：

<ul>
   <li v-for="book in this.books.all.filter(filterBook => parseInt(filterBook.ready))">
      <p v-text="book.name">
   </li>
</ul>

标签： javascriptarraysvue.jsvuejs2vuex

Answer 1

对此唯一合理的解释是readyis not a numberbut a String。我看不到其余的代码，所以我在这里做出假设，但这可能是因为您的数据来自 REST API 作为 JSON 对象/数组，其中准备好的是数值，但在引号中。

如果你检查一个字符串的真实性"0"，它是真的，这就是你需要 parseInt 的原因。

您可以在您的组件中使用验证typeof，或者只在开发工具中查看网络面板中的数据。

示例测试：

<ul>
   <li v-for="book in this.books.all">
      <p v-text="typeof(book.ready)">
   </li>
</ul>

---

作为旁注，您应该避免模板中的函数并更喜欢使用计算，这可以提高性能，因为计算值会被缓存

<ul>
   <li v-for="book in filteredBooks">
      <p v-text="book.name">
   </li>
</ul>

computed:{
   filteredBooks: function(){
      return this.books.all.filter(filterBook => parseInt(filterBook.ready))
   }
}