0

Помогите пож-та реализовать фильтрацию массива с помощью filter и ползунка. Отображать данные (отфильтрованные) при изменении значений ползунка

var vm = new Vue({
    el: '#content',
    data: {
        
        years: [
            {
                year: 2016,
                end: true
            },
            {
                year: 2017,
                end: true
            },
            {
                year: 2018,
                end: true
            },
            {
                year: 2019,
                end: false
            }
        ]
    },
   
    methods: {
        changeValueRange: function () {
           
        }
    }
})
 
<div id="content">
  <input 
    type="range" 
    max="2019"
    min="2016"
    v-model="rangeYear"
    v-on:change="changeValueRange()"
  >
    <input type="text" v-model="rangeYear" readonly>
        
  <div v-for="year in years">
    <span>{{year.year}}</span>
  </div>
</div>

1 ответ 1

0

var vm = new Vue({
    el: '#content',
    data: {
        rangeYear: 2016,
        years: [
            {
                year: 2016,
                end: true
            },
            {
                year: 2017,
                end: true
            },
            {
                year: 2018,
                end: true
            },
            {
                year: 2019,
                end: false
            }
        ]
    },
computed: {
   filterValue(){
     const currentValue = this.rangeYear;
     const d = this.years.filter(year => {
        return year.year === +currentValue 
     });
     return d
   }
 },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
 
<div id="content">
  <input 
    type="range" 
    max="2019"
    min="2016"

    v-model="rangeYear"
   >
    <input type="text" v-model="rangeYear" readonly>
        
  <div v-for="year in filterValue">
    <span>{{year.year}}</span>
  </div>
</div>

3
  • спасибо! вы не могли бы еще прояснить немного: +currentValue - что значит это "выражение"?
    – nbelle
    15 апр 2019 в 13:48
  • Преобразование строки в число
    – Dmytro
    15 апр 2019 в 13:53
  • Благодарю вас :)
    – nbelle
    15 апр 2019 в 13:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.