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
  • Преобразование строки в число 15 апр 2019 в 13:53
  • Благодарю вас :)
    – nbelle
    15 апр 2019 в 13:59

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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