Javascript 循环数据最初没有显示在my vue.js搜索功能中

我有一个使用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>

---

安装组件后，您需要运行

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

在导出默认值中添加以下内容：

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

---

当页面加载

时，只需添加
装入的
部分。searchResult
为空数组

只有当您单击“搜索”按钮时，才会调用您的
search
方法。然后将筛选的项目分配给
this.searchResult

简单的解决方案是手动调用组件
mounted
或
created
钩子上的
search
方法

更好的解决方案是使用管道和计算属性重写搜索逻辑