属性或方法“ searchValue”未在实例上定义，但在渲染期间被引用

Question

我只是从vue开始，下面有一个问题，我不知道为什么不显示api数据。

vue.runtime.esm.js？2b0e：619 [Vue警告]：属性或方法“结果”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

vue.runtime.esm.js？2b0e：619 [Vue警告]：属性或方法“ searchValue”未在实例上定义，但在渲染期间被引用。通过初始化属性，确保该属性在data选项中或对于基于类的组件都是反应性的。

这是我的代码：

<template>
  <div class="wrapper">
    <div class="search">
      <label for="search">Search</label>
      <input
        id="search"
        name="search"
        @input="handleInput"
        v-model="searchValue"
      />
      <ul>
        <li v-for="item in results" :key="item.data[0].nasa_id">
          <p>{{ item.data[0].description }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';


import debounce from 'lodash.debounce';

const API = 'https://images-api.nasa.gov/search';


export default {
  name: 'Search',
  date() {
    return {
      searchValue: '',
      results: [],
    };
  },
  methods: {
    // eslint-disable-next-line func-names
    handleInput: debounce(function () {
      axios.get(`${API}?q=${this.searchValue}&media_type=image`)
        .then((response) => {
          console.log(response.data.collection.items);
        })
        .catch((error) => {
          console.log(error);
        });
    }, 500),
  },
};
</script>