在我的 vue.js 搜索功能中，循环数据起初没有显示

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

Answer 2

When the page loads this.searchResult is empty array.

You search method is called only when you click search button. and then filtered items are assigned to this.searchResult

Simple solution would be to manually call the search method on component mounted or created hook.

Better solution would be to rewrite your search logic using pipe and computed propeties