VUE查询JSON出错

Question

报错："TypeError: this.jsonData.filter is not a function"
改了好久都不行，麻烦老师帮忙看下哪里错了呢?
keys.json

[
    {
        "name": "你好",
        "path": ""
    },
    {
        "name": "好的",
        "path": ""
    },
    {
        "name": "好了",
        "path": ""
    }
]

```html
<template>
    <div>
      <u-search placeholder="请输入关键字" v-model="searchValue" @search="search"></u-search>
      <ul v-if="matchedData.length">
        <li v-for="item in matchedData" :key="item.name">{{ item.name }}</li>
      </ul>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        searchValue: '',
        matchedData: [],
      };
    },
    mounted() {
      this.loadData();
    },
    methods: {
      search(event) {
        this.matchedData = this.jsonData.filter((item) =>
          item.name.includes(event.query)
        );
      },
      loadData() {
        axios.get('/static/keys.json')
          .then(response => {
            this.jsonData = response.data;
          })
          .catch(error => {
            console.error('Error loading data:', error);
          });
      },
    },
  };
  </script>
  
  <style>
  ul {
    list-style: none;
    padding: 0;
  }
  li {
    margin-bottom: 10px;
  }
  </style>

```

Answer 1

import axios from 'axios';

export default {
  data() {
    return {
      jsonData: null
    }
  },
  created() {
    axios.get('/api/data.json')
      .then(response => {
        this.jsonData = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

你this.jsonData这个都没定义呢