Связанные данные Vue.js для множественного выбора

jt25 спросил: 28 марта 2018 в 01:40 в: vue.js

Вот мой код

                <li>
                  <select v-model="selectYear" id="search-year" class="w-100 text-center mb-1" name="year" >
                    <option v-for="year in years" v-bind:value="year.value">
                      {{ year.text }}
                    </option>
                  </select>
                </li>
                <li>
                  <select v-model="selectMake" class="w-100 text-center mb-1" name="make">
                    <option v-for="make in makes" v-bind:value="make.value">
                      {{ make.text }}
                    </option>
                  </select>
                </li>

и данные компонентов:

export default {
  name: 'search',
  data: function () {
    return{
      selectYear: '2017',
      years: [
        { text: '2017', year: '2017' },
        { text: '2016', year: '2016' },
        { text: '2015', year: '2015' }
      ],
      selectMake: '',
      makes: [
        { text: 'Sony', value: 'Sony', year: '2017' },
        { text: 'Asus', value: 'Asus', year: '2017' },
        { text: 'IPhone', value: 'IPhone', year: '2016'}
      ]
    }
  }
}

Что мне нужно У меня есть несколько параметров выбора, которые связаны с тем, что только показывать в зависимости от предыдущей выбранной опции.

Например

Сценарий 1 : выбранный год: 2017

        Select Make Options Available: ['Sony','Asus']

Сценарий 2: Год Выбран: 2017

        Select Make Options Available: ['Iphone']

Сценарий 3: Год, выбранный: Нет

        Select Make Options Available: []

Возможно ли реализовать в Vue.js?

1 ответ

Есть решение
Jacob Goh ответил: 28 марта 2018 в 01:56

это типичный случай, когда вы будете использовать вычисленные значения.

добавьте вычисленное значение filteredMakes для фильтрации makes на основе selectYear

computed: {
    filteredMakes() {
        return this.makes.filter((obj, i) => {
            return obj.year === this.selectYear
        });
    }
}

и использовать вычисленное значение в v-for для параметра

<option v-for="make in filteredMakes" v-bind:value="make.value">

filteredMakes будет обновляется автоматически каждый раз, когда selectYear изменяется. Разве Vue не волшебный?

jt25 ответил: 28 марта 2018 в 02:02
до сих пор не работает :(
Jacob Goh ответил: 28 марта 2018 в 02:03
больше информации пожалуйста? возможно, демоверсия jsfiddle?
jt25 ответил: 28 марта 2018 в 02:09
jsfiddle.net/eywraw8t/55782
jt25 ответил: 28 марта 2018 в 02:13
может быть .filter не работает, потому что всякий раз, когда я пытаюсь вернуть this.makes, он возвращает все данные
Jacob Goh ответил: 28 марта 2018 в 02:15
<option v-for="year in years" v-bind:value="year.value"> это проблема. объект year ({ text: '2017', year: '2017' }) не имеет ключа с именем value. так должно быть v-bind:value="year.year"