Vue.js 使用 axios 从 API REST Framework 即时搜索答案

【问题标题】：Vue.js instant search from API REST Framework using axiosVue.js 使用 axios 从 API REST Framework 即时搜索
【发布时间】：2021-02-12 06:04:28
【问题描述】：

我有问题。我想创建即时搜索，没有任何搜索按钮，当我输入例如超过3个字母，我的结果会立即显示在下面。

我的代码：

<template>
<div class="nav-scroller py-1 mb-2">
    <div class="nav d-flex justify-content-between">
        <input v-model="keyword" class="form-control" type="text" placeholder="Search" aria-label="Search">
        <div v-bind:key="result.id" v-for="result in results">
        <p>Results are: {{ result.title }}</p>
        </div>
    </div>
</div>
</template>


<script>
import axios from 'axios';

export default {
  name: 'Home',
  components: {
  },
  data() {
      return {
          keyword: '',
          results: [],
      }
      },
  methods: {
      getResults() {
          axios.get("http://127.0.0.1:8000/api/v1/books/?search="+this.keyword)
          .then(res => (this.results = res.data))
          .catch(err => console.log(err));
      }
      },
      created() {
      this.getResults()
      }
}
</script>

现在我的 'keyword' 参数可能没有传递给 url，因为当我刷新页面时，来自 APi 的所有记录都是结果。

你能帮帮我吗？

【问题讨论】：

标签： django vue.js search django-rest-framework axios

【解决方案1】：

您应该在输入更改时调用方法

<input v-model="keyword" @input="getResults">

和方法：

getResults() {
   if (this.keyword.length > 3)
     axios.get("http://127.0.0.1:8000/api/v1/books/?search="+this.keyword)
       .then(res => (this.results = res.data))
       .catch(err => console.log(err));
   }
}

或者可以使用观察者。当关键字更改时，watcher 会调用 getResults 方法。

watch: {
  keyword: "getResults"
}

【讨论】：

【解决方案2】：

使用观察器来更新keyword 值。当keyword超过3个字母时，请求getResults()方法进行搜索。

export default {
  name: 'Home',
  components: {
  },
  data() {
      return {
          keyword: '',
          results: [],
      }
  },
  watch: {
    keyword: function(newVal) {
      if (newVal.length >2) {
        this.getResults();
      }
    }
  },
  methods: {
      getResults() {
          axios.get("http://127.0.0.1:8000/api/v1/books/?search="+this.keyword)
          .then(res => (this.results = res.data))
          .catch(err => console.log(err));
      }
      },
      created() {
      this.getResults()
      }
}

【讨论】：