Блог

У меня есть данные, поступающие из API. Это массив «домов».

Код выглядит так:

 lt;templategt;  lt;div class="search__sort"gt;  lt;input v-model="search" placeholder="Search for a house"gt;  lt;button class="sort__button"gt;Pricelt;/buttongt;  lt;button class="sort__button"gt;Sizelt;/buttongt;  lt;/divgt;   lt;div v-for="house in houses" :key="house.id" class="house"gt;  lt;router-link :to="{ name: 'HouseDetails', params: { id: house.id}}" gt;  lt;h2gt;ID = {{ house }}lt;/h2gt;  lt;h3gt; {{ house.location.street}} lt;/h3gt;  lt;img :src="house.image" /gt;    lt;/router-linkgt;  lt;button v-if="house.madeByMe" class="delete" @click="deleteHouse(house.id)"gt;Deletelt;/buttongt;  lt;/divgt;   lt;/templategt;  lt;scriptgt; 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 =gt; this.houses = response.data);  },   deleteHouse(id) {    const headers = { "CENSORED": "CENSORED" };  axios.delete('myAPI'   id, { headers })  .then(response =gt; {  console.log(response);  })  .catch(function (error) {  console.log(error.response);  });    },  },     } lt;/scriptgt;  

Мне каким-то образом нужно реализовать фильтр по вводу текста, чтобы, например, если пользователь введет название города, он отобразил все эти дома или название улицы, чтобы отфильтровать их по улице.

Есть какие-нибудь предложения, как я могу это сделать с помощью кода, который у меня уже есть?

Вы можете использовать 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 =gt; h.location.city.toLowerCase().includes(this.search.toLowerCase()))  }  } })  Vue.config.productionTip = false Vue.config.devtools = false 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"gt;lt;/scriptgt; lt;div id="demo"gt;  lt;div class="search__sort"gt;  lt;input v-model="search" placeholder="Search for a house"gt;  lt;button class="sort__button"gt;Pricelt;/buttongt;  lt;button class="sort__button"gt;Sizelt;/buttongt;  lt;/divgt;   lt;div v-for="house in filteredHouses" :key="house.id" class="house"gt;  lt;h3gt; {{ house.location.city}} lt;/h3gt;  lt;img :src="house.image" /gt;    lt;/divgt;   lt;/divgt; 

1. Вы захотите различить разницу между houses и displayedHouses таким, что displayedHouses является вашим отфильтрованным массивом.
2. lt;h2gt;ID = {{ house }}lt;/h2gt; не будет хорошо играть с вашим тестированием
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) =gt;  {  return house.city.includes(this.search) || house.state.includes(this.search) // || whatever else you want  })  } },