Блог

У меня есть функция поиска с использованием Vue.Js . Приведенный ниже код работает при нажатии кнопки поиска. Меня беспокоит то, что сначала не отображаются все данные, они появляются только тогда, когда я нажимаю поиск. То, что я хочу, данные отображаются в начале. Чего-нибудь не хватает в коде, который я создал? пожалуйста, помогите мне решить эту проблему

 <template>
    <div>
        <select v-model="selectedLevel">
            <option value="" disabled selected hidden>Level</option>
            <option value="beginner">Beginner</option>
            <option value="intermediate">Intermediate</option>
            <option value="advanced">Advanced</option>
        </select>

        <select v-model="selectedTime">
            <option value="" disabled selected hidden>Time</option>
            <option value="30">30 Min</option>
            <option value="60">60 Min</option>
        </select>

        <select v-model="selectedType">
            <option value="" disabled selected hidden>Type</option>
            <option value="cycling">Cycling</option>
            <option value="boxing">Boxing</option>
        </select>

        <button @click="search">Search</button>

        <div class="list-item" v-for="item in searchResult">
            <div class="card">
              <p>Class Name: {{ item.type }}</p>
              <p>Level: {{ item.level }}</p>
              <p>Time: {{ item.time }}</p>
            </div>
        </div>
    </div>
</template>
 

 export default {
        data() {
            return {
                selectedType: '',
                selectedTime: '',
                selectedLevel: '',
                items: [{
                      type: 'cycling',
                      time: '30',
                      level: 'beginner'
                    },
                    {
                      type: 'boxing',
                      time: '60',
                      level: 'beginner'
                    },
                    {
                      type: 'cycling',
                      time: '60',
                      level: 'advanced'
                    },
                    {
                      type: 'boxing',
                      time: '30',
                      level: 'advanced'
                    }
                ],
                searchResult: [],
            }
        },
        methods: {
            search() {
                let filterType = this.selectedType,
                filterTime = this.selectedTime,
                filterLevel = this.selectedLevel

                this.searchResult = this.items.filter(function(item) {
                    let filtered = true
                    if (filterType amp;amp; filterType.length > 0) {
                        filtered = item.type == filterType
                    }
                    if (filtered) {
                        if (filterTime amp;amp; filterTime.length > 0) {
                        filtered = item.time == filterTime
                        }
                    }
                    if (filtered) {
                        if (filterLevel amp;amp; filterLevel.length > 0) {
                        filtered = item.level == filterLevel
                        }
                    }
                    return filtered
                })
            }
        }
    }
 

Вам необходимо запустить search метод после монтирования компонента, поскольку теперь он запускается только при нажатии кнопки, попробуйте выполнить следующее:

внутри экспорта по умолчанию добавьте следующее:

 data() {
            return {
                selectedType: '',
                selectedTime: '',
                selectedLevel: '',
                items: [{
                      type: 'cycling',
                      time: '30',
                      level: 'beginner'
                    },
                    {
                      type: 'boxing',
                      time: '60',
                      level: 'beginner'
                    },
                    {
                      type: 'cycling',
                      time: '60',
                      level: 'advanced'
                    },
                    {
                      type: 'boxing',
                      time: '30',
                      level: 'advanced'
                    }
                ],
                searchResult: [],
            }
        },
mounted(){
 this.search();
}
 

Просто добавьте mounted часть

Когда страница загружается this.searchResult , это пустой массив.

Ваш search метод вызывается только при нажатии кнопки поиска. а затем отфильтрованные элементы присваиваются this.searchResult

Простым решением было бы вручную вызвать search метод для компонента mounted или created перехвата.

Лучшим решением было бы переписать вашу логику поиска, используя каналы и вычисляемые свойства