handler 在 nuxt.js 中未定义

Question

这是我的模板：

<template> <div>  <input type="search" placeholder="search" v-model="searchTerm1" @input="search"  />  <div v-if="searching"> <div v-for="post in posts" :key="post.slug"> <h3>{{ post.title }}</h3> </div> </div> </div> </template>

当我想在输入中搜索某些内容时，给我这个错误：处理程序未定义

渲染页面时发生错误。检查开发者工具控制台了解详细信息。

这是我的脚本：

 <script>
    import gql from 'graphql-tag';
     const search1 = gql`
     query search($searchTerm1: String) {
       posts(where: { search:$searchTerm1}) {
         edges {
           node {
             slug
             title
           }
         }
       }
     }`;
     export default {
       data() {
         return {
           searchTerm1: '',
           searching: false,
           posts: []
         };
       },
       async search() {
         if  (this.searchTerm1 === '') {
           this.searching = false;
         } else {
           this.searching = true;
           const { data } = await this.$apollo.query({
             query: search1,
             variables: {
               searchTerm1: this.searchTerm1
             }
           })
           this.posts = data.posts.edges.map(edge => edge.node);
         }
       }
     };
   </script>