Nuxt js中无法识别组合API箭头功能答案

【问题标题】：Composition API arrow function is not recognized in Nuxt jsNuxt js中无法识别组合API箭头功能
【发布时间】：2021-08-18 18:45:03
【问题描述】：

我正在使用 Nuxt Composition API 并尝试将 getList 中的元素呈现到我的页面。当我加载页面时，我收到一条错误消息，提示“_vm.getList 不是函数”。

 <template>
  <div class="drop-zone">
    <div v-for="item in getList(1)" :key="item.id" class="drag-el">
      {{item.title}}
    </div>   
  </div>
</template>
<script>
  export default{
    setup(){
      const items = ref([
        {id:0, title: 'Item A', list:1},
        {id:1, title: 'Item B', list:1},
        {id:2, title: 'Item C', list:2},
      ]),

      const getList = (list) => {
        return items.value.filter((item) => item.list == list);
      },

      return {
        getList,
    }
  },
  }
</script>

【问题讨论】：

实例中不存在属性的原因是组件中存在其他错误，例如答案表明了什么。另一种是您使用不知道setup 的旧框架版本。调试您的代码以确保达到return。

标签： javascript vue.js nuxt.js vue-composition-api

【解决方案1】：

您需要导入ref（不确定如何），然后这个应该可以工作

<template>
  <div class="drop-zone">
    <div v-for="item in getList(1)" :key="item.id" class="drag-el">
      {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  setup() {
    const items = ref([
      { id: 0, title: 'Item A', list: 1 },
      { id: 1, title: 'Item B', list: 1 },
      { id: 2, title: 'Item C', list: 2 },
    ])

    const getList = (list) => {
      return items.value.filter((item) => item.list === list)
    }

    return {
      getList,
    }
  },
}
</script>

至少，ESlint 并没有对此抱怨。抱歉，如果我不能提供更多帮助，到目前为止（还）没有使用 Vue3。

【讨论】：

我添加了以下内容： import { ref } from '@nuxtjs/composition-api' 但它仍然不起作用。我得到同样的错误
您的模板也存在一些小问题。你试过我的还是打开了 ESlint？
我使用了你的代码版本。我仍然对 getList 函数有同样的错误
也许你需要将它定义为一个函数，idk。抱歉，这里无法提供更多帮助。
@el_M '@nuxtjs/composition-api' 中似乎没有ref。您需要以任何方式正确导入它，否则您将使用此组件中未定义的函数。