The question is, there is a cycle in which we output everything we find in the array.

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

What to write for him v-else in which there will be a message that nothing was found on the request.

    1 answer 1

    A simple v-else should come up:

     <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>

    Or put v-if in a separate block:

     <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>

    And I also advise you to make such conditions in the computed or methods , why then do you use Vue in this case.

    • If carried out in a separate unit, does not work. A simple v-else output "Nothing found" for each element. Suppose we have a 50 program , it will output 50 "No results found." - Fess Laeda