Vue.jsで検索フォームを作る

from rest_framework import viewsets, filters # 追加
from .models import Article
from .serializers import ArticleSerializer


class ArticleViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer
    filter_backends = (filters.SearchFilter,) # 追加
    search_fields = ('article_id', 'article_heading','article_body') # 追加

from rest_framework import routers
from article.viewsets import ArticleViewSet


router = routers.DefaultRouter()
router.register('article', ArticleViewSet)

<h1>
  投稿一覧
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addArticleModal">
    新規追加
  </button>
</h1>
 

<!--ここから追加-->
<div class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="text" placeholder="Search" v-model="search_term" aria-label="Search" />
  <button class="btn btn-outline-success my-2 my-sm-0" v-on:click.prevent="getArticles()">
    Search
  </button>
</div>
<!--ここまで-->

data: {
  articles: [],
  loading: true,
  currentArticle: {},
  message: null,
  newArticle: { article_heading: null, article_body: null },
  search_term: ""
},
methods: {
  getArticles: function() {
    let api_url = "/api/article/";
    if (this.search_term !== "" || this.search_term !== null) {
      api_url = `/api/article/?search=${this.search_term}`;
    }
    this.loading = true;
    this.$http
    .get(api_url)
    .then(response => {
      this.articles = response.data;
      this.loading = false;
    })
    .catch(err => {
    this.loading = false;
    console.log(err);
    });
  }
}