Javascript 如何使用Vue js从API数据创建搜索过滤器？

我从《星球大战》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>

我是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>

{{GetAllStarWarsOple（）}}


{{person.name}


导出默认值{
名称：“StarwarsOpleComponent”，
数据（）{
返回{
人员：[]，
搜索：“”
}
},
安装的（）{
console.log（'组件已安装'）
},
方法：{
getAllStarWarsPeople（）{
取回（“https://swapi.co/api/people/")
.then（response=>response.json（））
。然后（数据=>{
这就是：人=数据；
})
}
},
计算：{
filteredPeople:函数（）{
返回此.people.filter（（person）=>{
返回person.name.match（this.search）；
});
}
}
}

加载组件时，使用“created（）”调用GetAllStarWarsOple（）

在输入字段中将GetAllStarWarsOple添加为“@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>

{{person.name}

加载组件时，使用“created（）”调用GetAllStarWarsOple（）

在输入字段中将GetAllStarWarsOple添加为“@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>

{{person.name}

您可以像

计算：{
过滤人员（）{
如果（这个人）{
返回此.people.filter（（person）=>{
返回person.name.match（this.search）；
});
}
返回false；
}
}

您可以像

计算：{
过滤人员（）{
如果（这个人）{
返回此.people.filter（（person）=>{
返回person.name.match（this.search）；
});
}
返回false；
}
}

是的，如果不想使用@keyUp handler，您也可以使用watch进行搜索。是的，我同意@KhairulHabib，我使用“@keyUp”，这对初学者来说更简单。是的，如果不想使用@keyUp handler，您也可以使用watch进行搜索。是的，我同意@KhairulHabib，我使用“@keyUp”，这对初学者来说更简单。在vue中，

此

不能用于外部函数。改用Evan answer中的过滤函数。swapi在这里不是一个好选项，因为不可能按关键字搜索。如果swapi实际上通过该请求返回所有人，这不会是一个问题，但它不会，它正在对其进行分页，因此您需要发出后续请求以实际获取所有人进行筛选，因为

people

url只返回10人，并为您提供一个

next

属性，如：

“next”："https://swapi.co/api/people/?page=2“，页面3等考虑使用另一个免费API代替，除非您想发射多个请求并将所有人存储在一个数组中以过滤：）：在VUE中，<代码>此< /代码>不能在异域函数中使用。改用Evan answer中的过滤函数。swapi在这里不是一个好选项，因为不可能按关键字搜索。如果swapi实际上通过该请求返回所有人，这不会是一个问题，但它不会，它正在对其进行分页，因此您需要发出后续请求以实际获取所有人进行筛选，因为
people
url只返回10人，并为您提供一个
next
属性，如：
“next”："https://swapi.co/api/people/?page=2“，页面3等考虑使用另一个免费API，除非您想发射多个请求并将所有人存储在一个数组中以过滤：”