无法在计算的 Nuxt 中使用 lodash 进行过滤

Question

我无法在 nuxt 的计算属性中使用 lodash 进行过滤。
我从 API 获取博客列表，在 Vue 调试器中出现以下错误

(error during evaluation)

我想过滤状态为false的数据列表。

这是JS

<script>
import { _ } from 'lodash'

export default {
  data() {
    return {
      data: [
        {
          deleted: {
            status: false,
            date: '2021-12-20T10:18:33.231Z',
          },
          blogUID: '*********',
          title: 'Guide To Visiting Inflatable Island In The New Normal',
        },
        {
          deleted: {
            status: false,
            date: '2021-12-20T10:18:33.231Z',
          },
          blogUID: '*********',
          title: '24 Best Places to Celebrate New Year in India',
        },
        {
          deleted: {
            status: false,
            date: '2021-12-20T10:18:33.231Z',
          },
          blogUID: '*********',
          title: 'Top Things to Do in Dubai',
        },
        {
          deleted: {
            status: true,
            date: '2021-12-20T10:18:33.231Z',
          },
          blogUID: '*********',
          title: 'Best Places to Celebrate New Year 2022',
        },
      ],
    }
  },

  computed: {
    activeData() {
      return _.filter(this.data, { 'deleted.status': false })
    },
  },
}
</script>

Answer 1

你真的不需要 lodash。

使用这样的vanilla JS filter方法

return this.data.filter((el) => !el.deleted.status)

或者如果你想检查与 false 的严格相等性，而不是仅仅使用一个虚假值（undefined、null 等...）

return this.data.filter((el) => el.deleted.status === false)

Answer 2

虽然没有必要使用 lodash，但回答你的问题

return _.filter(fields, 'deleted.status', false)

或

return _.filter(fields, {deleted: {status: false}})

无法在计算的 Nuxt 中使用 lodash 进行过滤

Not able to filter using lodash in computed Nuxt

lodash

vue.js

nuxt.js