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>

Answer 1

对此的唯一合理的解释是，ready不是number而是String。我看不到其余的代码，因此在这里进行假设，但这很可能是因为您的数据来自REST API，是JSON对象/数组，其中ready是数字值，但用引号引起来。

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

Answer 2

以防万一其他人到此为止。我发现必须使用parseInt()的原因是因为我使用Axios从后端和Axios returns a string for long data instead of an object获取数据。

当我通过检查typeof中是否有filterBook.ready来进行测试时，它返回了number，因为我从后端获取的数据测试时间不长。

没有parseInt怎么不更新Vue的共享状态？

2 个答案: