After successfully looping through the data and filtering it, I have implemented a v-if condition to display only the necessary matches.
However, when attempting to use v-else to handle cases where no matches are found, the loop continues even for non-matching data.
My goal is to set a condition that displays a "No matches found" message only when there is no data for the required field.
In order to determine if there is a match in the entire dataset, you will need to create another computed property. Once you have this computed property set up, you can utilize it in your code like this:
<template v-if="isMatching">
...your current code...
</template>
<template v-else>
<div>sa</div>
</template>
If preferred, you can also use <div> instead of <template>
You need to manage different states to display relevant messages and use logic to detect them.
Utilize a computed property to filter your results, which creates a separate copy of filtered items that you can iterate over. This helps in distinguishing the filtered items from the original ones.
For instance, (since there is no StatusComponent it outputs JSON)
<div id="app">
search <input v-model="filter.search"/>
box 1 <input type="radio" v-model="filter.box" :value="1">
box 2 <input type="radio" v-model="filter.box" :value="2">
<div v-if="!loading">
<template v-if="filtered_paints.length">
<div v-for="(paint, index) in filtered_paints" :key="paint.id" class="line">
{{ index }}:
{{ filter.search ? 'searched: ' + filter.search : '' }}
{{ filter.box ? 'in box: ' + filter.box : '' }}
{{ paint }}
</div>
</template>
<template v-else>
<div v-if="!paints.length">
There was an issue loading paints.
</div>
<div v-else>
No matching paints, for:
{{ filter.search ? filter.search : '' }}
{{ filter.box ? 'in box: ' + filter.box : '' }}
</div>
</template>
</div>
<div v-else>
Loading paints...
</div>
</div>
{
data() {
return {
loading: true,
filter: {
search: '',
box: 0
},
paints: [],
};
},
computed: {
filtered_paints() {
return this.paints.filter((i) => {
if (!this.filter.box && this.filter.search === '') {
return true
}
let found = false
if (this.filter.box && this.filter.search) {
if (i.boxid === Number(this.filter.box) && i.name.startsWith(this.filter.search)) {
found = true
}
return found
}
if (this.filter.box && i.boxid === Number(this.filter.box)) {
found = true
}
if (this.filter.search && i.name.startsWith(this.filter.search)) {
found = true
}
return found
})
}
},
mounted() {
console.log('Mock loading some paints');
setTimeout(() => {
this.paints = [
{ id: 1, paintid: 1, boxid: 1, name: 'white' },
{ id: 2, paintid: 2, boxid: 2, name: 'black' }
]
this.loading = false
}, 2000)
}
}
Check out the example online:
I am struggling to extract the desired data from the response. Despite trying various methods, I can't seem to achieve the expected outcome. facebookLogin(): void { this.fb.login() .then((res: LoginResponse) => { this.acce ...
My webpage features a bootstrap 4 container with three columns that adjust on screen sizes above the md breakpoint (col-md-4). Each column contains an img with the class img-fluid, and when hovered over, text description appears. I want this hover text to ...
I am working on setting up a dynamic array within the computed: section of my .vue file. This array consists of a list of URLs that I need to call individually (within a repeated component) in order to fetch articles. These articles can vary, so the comput ...
Currently working on a Vue website project. Smooth development progress on the server, but encountering issues with paths on Laragon and production server - showing "file not found". Tried various prefixes like: '/', './', 'https: ...
Currently, I am developing a function that will select a span element when clicked based on its data attribute and value. Here is the code snippet: function moveFilterElements(event) { if ($(event).hasClass('active')) { var dataAtt ...
Consider the following HTML: <template v-for="(child, index) in group"> <div :class="{'border-pink-700 bg-gray-100 ': selected === child.id}"> <div>Container Content</div> </div> & ...
I'm encountering an issue with TypeScript that I'm not sure if it's a bug or an unsupported feature. Here is a Minimal Viable Example (MVE) of the problem: interface ColumnOptions<R> { valueFormatter(params: R): string; valueGette ...
Currently, I am utilizing HTML & JavaScript on the client side and NodeJs for the server side of my project. Incorporated in my form are multiple radio buttons. When the user clicks on the submit button, my intention is to post the results to the server. ...
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 4 DatePicker</title> <script src="https://c ...
Can someone help me figure out how to implement a mouseover effect for checkboxes? I want the checkbox to display more information about the subject when someone hovers over it. Here is the code I have for generating dynamic checkboxes, but I'm not s ...
Assuming I have the interfaces provided below: export interface IUserRow { id: string, state: string, email: string, } export interface ITableRow { id: string, [key: string]: any; } export type Rows = ITableRow | IUserRow; // additio ...
I'm looking to send an ajax request to a PHP file that will retrieve a user's information in JSON format. I then want to take this data and assign it to a property within an object. For example: User = { prop1: '' } I simply need to ...
I'm completely new to this. I managed to set up a functional navbar with a dropdown feature that consists of 3 links. When expanded, each dropdown link displays a card upon clicking, revealing contact information. Everything works perfectly fine...exc ...
I am currently working on creating an autocomplete feature using Vue.js. However, I have run into an issue with the scroll animation. The goal is to enable scrolling by clicking on the arrow keys in the direction of the key pressed, but the scroll should ...
I successfully exported a single object (box.json) and scene (box2.json) from Blender using io_three. Additionally, I was able to load a single object (box.json) with textures using JSONLoader() in the modelWithTexture.html file. My goal is to load an ent ...
Looking to showcase two images side by side using React Native, where I can customize the screen percentage each image takes up. The combined size of the images will exceed the horizontal screen space available, so I want them to maintain their original di ...
I'm currently utilizing PostgreSQL alongside node-postgres: pool, Node.js, and express to execute some basic queries. The issue I encounter is that the returned object is wrapped within square brackets, but my preference is to receive it without them. ...
To track employee clock-ins and clock-outs, I have created a MySQL table named emp_log. When an employee clicks a button, the current date and time are automatically inserted into the emp_log table, along with their user_id and clock_id. This process shou ...
I have connected the downloaded css and js files from bootstrap, but the features are not working as expected. The <blockquote> tag is displaying only plain text, and the <cite></cite> element is not showing "-". What could be the reason ...
I have a next.js app... running in dev mode. One of the pages maps through JSON data from the backend and displays an 'EventListItem' component for each 'event' object. List page: http://localhost:3000/6/events/2021-08-26 (http://loca ...