javascript - 为什么 Vue 的共享状态在没有 parseInt 的情况下不会更新？

Question

我注意到我的代码中有一个我不理解的小问题，我很好奇为什么它会这样。我猜它是一般的 JavaScript 东西而不是 Vue。

无论如何，我使用共享状态来表示Books。但是，当书籍的 ready 属性更新时，除非我在过滤要显示的书籍时使用 parseInt(filterBook.ready) ，否则不会反射(reflect)更改。顺便说一句，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>

Answer 1

对此的唯一合理解释是，ready 不是一个数字，而是一个字符串。我看不到代码的其余部分，所以我在这里做出假设，但这可能是因为您的数据来自 REST API 作为 JSON 对象/数组，其中 read 是数值，但用引号引起来。

如果你检查字符串“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))
   }
}