vue.js Поиск по элементам

145

13 ноября 2018, 21:10

Всем привет,не получается реализовать поиск по элементам,данные получаю из api,подскажите как его можно сделать.Вот код элемента,по которому нужно искать,поиск должен идти по make,model,licensePlate,vin,clientName

<form class="search">
        <input type="text" v-model="search" placeholder="Искать здесь...">
      </form>
      <v-card
        tabindex="1"
        class="elevation-4 mb-3"
        v-for="ad in info"
        :key="ad.id">
          <v-flex xs4>
          </v-flex>
        <div class="table">
          <v-flex xs8>
            <v-card-text>
              <h2> {{ad.car.make}} {{ad.car.model}}</h2>
              <p></p>
              <p><b>{{ad.car.licensePlate}} |  VIN: {{ad.car.vin}}<br> 
{{ad.client.clientName}}</b></p>
              <p class="status-info"><b>{{ad.creditAgreementNumber}}</b> 
 <br/> {{ad.creditAgreementStatus}}</p>
            </v-card-text>
            <v-card-actions>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-flex>
        </div>
      </v-card>

Вот в таком виде я получаю данные

"id": "22", 
"creditAgreementNumber":"2344ee22",     
"creditAgreementGroup":"Группа 1 ",     
"creditAgreementStatus":"<строковый статус>",   "creditAgreementSubStatus":"<строковый подстатус>",     "totalDebt":12345.45, 
"userId": 1000, 
"userName": "Петров Петр Петрович", 
"car" : { 
"id": "2034212",
    "pledgeAgreementNumber":"1892682763986alkjsdhf",                    "make":"Chevrolet",
"model":"Aveo", 
"manufactureYear":2012, 
"color":"радикально чёрный (титаник)", 
"vin":"KNJLT06HXV6221964", 
"licensePlate":"A234AA73", 
"enginePower":89.2, 
"withdrawalDate":"25 февраля 2017 г.", 
"returnDate":"15 апреля 2017 г.", 
"saleDate":"18 августа 2017 г.",
"parkingId": "212"
}, 
"client" : { 
"clientId":"1234w", 
"clientName":"Иванов Иван Иванович", 
"clientAddress":"Россия, Ивановская область, деревня Вайфаевка,     проспект Финансистов, дом 4" 
},

Получение данных

data() {
    return {
      search:'',
      info: null,

    }
  },
  mounted() {
    axios.get('api/v1/contracts',{
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('user-token')
      }
    })
      .then(response => (this.info = response.data));
  }

Answer 1

Для Vue.js После получения данных, заносите их в массив:

data() {
    return {
       carsData: [],
       search: ""
    }
},
methods: {
    getData() {
        /...тут получаете ваши данные.../
        this.carsData = response.data
    }
},
computed: {
    filteredCars() {
      let result = this.carsData;
      if(this.search) {
          result = result.filter(item => {
              if(item.car.make.indexOf(this.search) != -1 ||
                 item.car.model.indexOf(this.search) != -1 ||
                 item.car.licensePlate.indexOf(this.search) != -1 ||
                 item.car.vin.indexOf(this.search) != -1 ||
                 item.client.clientName.indexOf(this.search) != -1) {
                   return item
               }
          })
      }
      return result;
    }
}
mounted() {
    this.getData()
}

Затем выводите уже данные из filteredCars()