Vue.js3和搜索

我有來自 API 的資料。它是一系列“房屋”。

代碼如下所示：

<template>
    <div class="search__sort">
        <input v-model="search" placeholder="Search for a house">
        <button class="sort__button">Price</button>
        <button class="sort__button">Size</button>
    </div>    
    <div v-for="house in houses" :key="house.id" class="house">
        <router-link :to="{ name: 'HouseDetails', params: { id: house.id}}" >
            <h2>ID = {{ house }}</h2>
            <h3> {{ house.location.street}} </h3>
            <img :src="house.image" />
                
        </router-link>
        <button v-if="house.madeByMe" class="delete" @click="deleteHouse(house.id)">Delete</button>
    </div>
   
</template>

<script>
import axios from 'axios'


export default {
    name: 'Houses',
 

    data(){
        return {
            houses: [],
        }
    },
    
    created() {
        this.getHouses();
    },

    methods: {

      

        getHouses(){
            // GET request using axios with set headers
            const headers = { "CENSORED": "CENSORED" };
            axios.get('myAPI', { headers })
            .then(response => this.houses = response.data);
        },

        deleteHouse(id) {
            
            const headers = { "CENSORED": "CENSORED" };
            axios.delete('myAPI'   id, { headers })
            .then(response => {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error.response);
            });
                        
        },
    },
   


}
</script>

我不知何故需要通過文本輸入實作過濾器，例如，如果用戶輸入城市名稱，它將顯示所有這些房屋或街道名稱以按街道過濾。

任何建議如何使用我已經擁有的代碼來做到這一點？

uj5u.com熱心網友回復：

您可以使用computed屬性：

new Vue({
  el: '#demo',
  data() {
    return {
      search: '',
      houses: [{ "id": 2, "image": "myAPI/house1.jpg", "price": 123, "rooms": { "bedrooms": 1, "bathrooms": 1 }, "size": 500, "description": "oui", "location": { "street": "street 20", "city": "assas", "zip": "asasdd" }, "createdAt": "2020-05-07", "constructionYear": 2000, "hasGarage": false, "madeByMe": false }, { "id": 3, "image": "myAPI/house1.jpg", "price": 123, "rooms": { "bedrooms": 1, "bathrooms": 1 }, "size": 500, "description": "oui", "location": { "street": "street 20", "city": "adb", "zip": "asasdd" }, "createdAt": "2020-05-07", "constructionYear": 2000, "hasGarage": false, "madeByMe": false },{ "id": 4, "image": "myAPI/house1.jpg", "price": 123, "rooms": { "bedrooms": 1, "bathrooms": 1 }, "size": 500, "description": "oui", "location": { "street": "street 20", "city": "bbb", "zip": "asasdd" }, "createdAt": "2020-05-07", "constructionYear": 2000, "hasGarage": false, "madeByMe": false }],
    }
  },
  computed: {
    filteredHouses(){
      return this.houses.filter(h => h.location.city.toLowerCase().includes(this.search.toLowerCase()))
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
    <div class="search__sort">
        <input v-model="search" placeholder="Search for a house">
        <button class="sort__button">Price</button>
        <button class="sort__button">Size</button>
    </div>    
    <div v-for="house in filteredHouses" :key="house.id" class="house">
            <h3> {{ house.location.city}} </h3>
            <img :src="house.image" />
   
    </div>
      
</div>

uj5u.com熱心網友回復：

1. 您將要區分之間的差異houses，并displayedHouses使得displayedHouses你濾波陣列。

2. <h2>ID = {{ house }}</h2> 不會很好地配合你的測驗

3. displayedHouses將是一個computed看起來像：

computed:
{
 /**
  * @return {array} List of displayed houses from search input
  */
 displayedHouses()
 {
  if (!this.houses || !this.houses.length)
  {
    return []
  }
  if (!this.search)
  {
    return this.houses
  }
  return this.houses.filter( (house) =>
  {
    return house.city.includes(this.search) || house.state.includes(this.search) // || whatever else you want
  })
 }
},

標籤：javascript Vue.js

上一篇：如何為物件屬性的可變參考賦值？

下一篇：如果缺少函式引數如何失敗