Giriş yapmadınız.

#1 29.01.2019 13:31:40

potti
Üye
Kayıtlı: 24.09.2018
Mesajlar: 74

Axios ile fetch edilen dataya Vue ile filter uygulamak

Database'den fetch ettigim dataya filter islemi uygulamak istiyorum,
Vue'nin sikinti cekmekteyim. Datayi  iki tarz filtereleme islemine tabi tutmaya calisiyom(check box ve range slider)
Bu ku konuda bilgisi olup, yol gosterebilecek birisi varsa sevinirim.

<script>

import vueSlider from 'vue-slider-component/src/vue-slider.vue';

export default {

      data() {
        return {
          width: { value: [0, 190],
            options: {
            data: null, eventType: 'auto', width: 'auto',
            height: 6, dotSize: 16, min: 0, max: 200 }
          },
          prices: { value: [0, 9500],
            options: {
            data: null, eventType: 'auto', width: 'auto',
            height: 6, dotSize: 16, min: 0, max: 10000 }
          },
          regions: [],
          rooms: [],
          checkedRegions: [],
          checkedRooms: [],
          estates: null,
        }
      },
      created(){
        axios.get('/ajax').then((response) => {
          this.estates = response.data
        })
      }
      methods() {
          fetchData: function () {
            return this.estates
          },
      }
}

</script>

Template

<div class="container">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3">
          <h3>Price Slider</h3>
          <ul>
            <li>
              <vue-slider
                    ref="slider"
                    v-model="value"
                    v-bind="options"
                >
              </vue-slider>
            </li>
          </ul>
          <h3>Width Slider</h3>
          <ul>
            <li>
              <vue-slider
                    ref="slider"
                    v-model="value"
                    v-bind="options"
                >
              </vue-slider>
            </li>
          </ul>
          <h3>Regions</h3>
          <ul>
             <li>
              <input type="checkbox" v-model="checkedRegions"  v-bind:value="regions.id">関東 <input/>
              <input type="checkbox" v-model="checkedRegions"  v-bind:value="regions.id">関西 <input/>
              <input type="checkbox" v-model="checkedRegions"  v-bind:value="regions.id">北海道<input/>
            </li>
            </li>
          </ul>
          <h3>Rooms</h3>
          <ul>
             <li>
              <input type="checkbox" v-model="checkedRooms"  v-bind:value="rooms.id">1DK <input/>
              <input type="checkbox" v-model="checkedRooms"  v-bind:value="rooms.id">2LDK <input/>
              <input type="checkbox" v-model="checkedRooms"  v-bind:value="rooms.id">3LDK<input/>
              <input type="checkbox" v-model="checkedRooms"  v-bind:value="rooms.id">4LDK <input/>
            </li>
          </ul>
        </div>
        <div class="col-md-9" v-for="estate in estates" :key="estate.id">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">{{estate.building_name}}</h5>
              <p class="card-text">{{estate.price}}</p>
              <p class="card-text">{{estate.address}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Son düzenleyen potti (29.01.2019 13:41:14)

Çevrimdışı

#2 08.02.2019 15:45:09

assoft
Üye
Kayıtlı: 09.03.2014
Mesajlar: 54

Yanıt: Axios ile fetch edilen dataya Vue ile filter uygulamak

JS Filter Method:

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

Bunu kendi kodunuza göre çevirin.

Çevrimdışı

Forum alt kısmı