"Unresolved function" on Vue.js 3

I'm starting to get my head around VueJS 3.0 and am being slightly derailed by WebStorm telling me that I have "Unresolved" functions on an Array that is declared as`Reactive in <script setup>

The following is a section of my script setup which illustrates the problem.
sourceData is a JSON text file that contains a whole chunk of data, of which posts is the array that I am interested in. That array is made available as the posts variable using reactive()

Everyhing works as I would expect and I can filter the array and push to it in the code below with no issues.

However WebStorm insists on telling me that there are Problems in the component, namely 

Unresolved function of method filter()
Unresolved function of method push()

Am I doing anything wrong or is this just something that WebStorm cannot cope with?
(For the record switching to ref() does nothing other than have Webstorm warn me that I need .value on my references to post)

<script setup>
  import { reactive} from 'vue'
  import sourceData from '@/data.json'
  const posts = reactive(sourceData.posts)

  const threadPosts = computed(() => {
    return posts.filter(post => post.threadId === props.id)
  })

  function addPost () {
    const post = {
      // Some data, not important
    }
    posts.push(post)
  }
</script>
 

0

Thank you for your help in providing all the details. We managed to reproduce the problem and have created a new ticket: https://youtrack.jetbrains.com/issue/WEB-65791/In-Vue-files-Array-methods-are-not-resolved-for-arrays-imported-from-.json. Please subscribe to it to get notified of updates.

0

请先登录再写评论。