"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>
请先登录再写评论。
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.