javascript - Loop data is not showing at first in my vue.js search feature

Question

I have a search feature using Vue.Js. The code below works when clicking the search button. My concern is, all data does not appear at first, it appears only when I click search. What I want, data appears at the start. Is there anything missing in the code I created? please help me solving this problem

<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 && filterType.length > 0) {
                        filtered = item.type == filterType
                    }
                    if (filtered) {
                        if (filterTime && filterTime.length > 0) {
                        filtered = item.time == filterTime
                        }
                    }
                    if (filtered) {
                        if (filterLevel && filterLevel.length > 0) {
                        filtered = item.level == filterLevel
                        }
                    }
                    return filtered
                })
            }
        }
    }

Answer 1

You need to run the search method once the component is mounted because now runs only when you click the button, try the below:

inside export default add the below:

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();
}

Just add the mounted part