如何使用 API 數據中的 Vue js 創建搜索過濾器？

Question

我正在從 Star Wars API 獲取數據，更具體地說是人們，它正在工作。 我想創建一個搜索過濾器功能，當我開始輸入時，只顯示帶有這些字母的名稱。 這是我在 StarWarsPeopleComponent.vue 文件中獲取數據的代碼：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <input type='text' v-model="search" placeholder='Search people...'/><br>

                {{ getAllStarWarsPeople() }}

                <ul>
                    <li v-for="person in people.results">
                        {{ person.name }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

    export default {

        name: "StarWarsPeopleComponent",

        data() {
            return {
                people: [],
                search: ''
            }
        },

        mounted() {
            console.log('Component mounted.')
        },

        methods:{

            getAllStarWarsPeople() {

                fetch("https://swapi.co/api/people/")
                    .then(response=>response.json())
                    .then(data=>{
                        this.people=data;
                    })

            }

        }
    }
</script>

請注意我如何使用 people.results 訪問 v-for 中的數據。

這是我使用我創建的計算函數更新的組件，但現在數據未顯示，我收到此錯誤：

[Vue warn]: Error in render: "TypeError: this.people.filter is not a function".

我對 Vue js 很陌生，我不知道這意味着什么或如何解決它。 任何人都可以幫忙嗎？

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <input type='text' v-model="search" placeholder='Search people...'/><br>

                {{ getAllStarWarsPeople() }}

                <ul>
                    <li v-for="person in filteredPeople">
                        {{ person.name }}
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

    export default {

        name: "StarWarsPeopleComponent",

        data() {
            return {
                people: [],
                search: ''
            }
        },
        mounted() {
            console.log('Component mounted.')
        },
        methods:{

            getAllStarWarsPeople() {

                fetch("https://swapi.co/api/people/")
                    .then(response=>response.json())
                    .then(data=>{
                        this.people=data;
                    })

            }

        },
        computed: {
            filteredPeople: function() {
                return this.people.filter((person) => {
                   return person.name.match(this.search);
                });
            }
        }
    }
</script>

Answer 1

在加載組件時使用“created()”調用 getAllStarWarsPeople()。

在輸入字段中將 getAllStarWarsPeople 添加為“@keyup”。

嘗試這個：

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <input
          type="text"
          v-model.trim="search"
          placeholder="Search people..."
          @keyup="getAllStarWarsPeople"
        /><br />
        <ul>
          <li v-for="person in people" :key="person.id">
            {{ person.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "StarWarsPeopleComponent",

  data() {
    return {
      people: [],
      search: ""
    };
  },

  mounted() {
    console.log("Component mounted.");
  },

  methods: {
    getAllStarWarsPeople() {
      fetch("https://swapi.co/api/people/")
        .then(response => response.json())
        .then(res => {
          if (this.search) {
            this.people = res.results.filter(people =>
              people.name.toLowerCase().includes(this.search.toLowerCase())
            );
          } else {
            this.people = res.results;
          }
        });
    }
  },
  created() {
    this.getAllStarWarsPeople();
  }
};
</script>

JsFiddle在這里：

 new Vue({ el: "#app", data: { people: [], search: "" }, methods: { getAllStarWarsPeople() { fetch("https://swapi.co/api/people/") .then(response => response.json()) .then(res => { if (this.search) { this.people = res.results.filter(people => people.name.toLowerCase().includes(this.search.toLowerCase()) ); } else { this.people = res.results; } }); } }, created() { this.getAllStarWarsPeople(); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input type="text" v-model.trim="search" placeholder="Search people..." @keyup="getAllStarWarsPeople" /><br /> <ul> <li v-for="person in people" :key="person.id"> {{ person.name }} </li> </ul> </div>

Answer 2

你可以使用像

 computed: { filteredPeople() { if (this.people) { return this.people.filter((person) => { return person.name.match(this.search); }); } return false; } }