Vue.js вывод сообщения при не найденных данных

112

21 января 2020, 07:50

Вопрос такой, есть цикл при котором мы выводим все что нашли в массиве.

 <v-text-field v-model="epgFilter"></v-text-field> //инпут ввода
<div 
v-if="~program.title.toLowerCase().indexOf(epgFilter.toLowerCase()) || ~program.description.toLowerCase().indexOf(epgFilter.toLowerCase()) || ~program.date.startTime.toLowerCase().indexOf(epgFilter.toLowerCase())"
 v-for="program in filteredPrograms">

data () {
            return {
                channelsFilter: '',
                epgFilter:'',
            }
        },
    computed: {
                filteredPrograms() {
                    if(this.currentPrograms) {
                        return this.currentPrograms.filter(program => {
                            if(this.selectedProgramDay == program.date.day) {
                                return program;
                            }
                        })
                    }
                }
            },

Какой написать для него v-else в котором будет сообщение что по запросу ничего не найдено.

Answer 1

Простой же v-else должен подойти:

<div 
v-if="~program.title.toLowerCase().indexOf(epgFilter.toLowerCase()) || ~program.description.toLowerCase().indexOf(epgFilter.toLowerCase()) || ~program.date.startTime.toLowerCase().indexOf(epgFilter.toLowerCase())"
 v-for="program in filteredPrograms">
<div v-else>
  Ничего не найдено.
</div>

Или вынести v-if в отдельный блок:

<div 
v-if="~program.title.toLowerCase().indexOf(epgFilter.toLowerCase()) || ~program.description.toLowerCase().indexOf(epgFilter.toLowerCase()) || ~program.date.startTime.toLowerCase().indexOf(epgFilter.toLowerCase())">
    <div v-for="program in filteredPrograms"></div>
</div>
<div v-else>
  Ничего не найдено.
</div>

И так же советую такие условия выносить в computed или methods, зачем же вы тогда Vue юзаете в таком случае.