The Element UI feature ensures that duplicate entries are not added to the table through the use of

Within my form created with the Element UI, I have implemented an autocomplete feature. However, I am facing an issue where duplicate entries are being added to the table even if they already exist. My goal is to prevent the addition of duplicate entries and instead highlight the existing row when the same item_name is selected by checking the upc_ean_isbn, which serves as the unique key.

https://i.sstatic.net/Twf0J.png

Below is the code snippet:

<template>
  <!-- Code goes here -->
</template>

<script>
export default {
  // Your data and methods
};
</script>

If you want to view a working example, check out my jsfiddle here.

Thank you.

Answer №1

Make a modification to the handleSelect method

handleSelect(item) {
  if (!this.cart.items.map(x => x.code).includes(item.upc_ean_isbn)) {
    this.currentItem.code = item.upc_ean_isbn;
    this.currentItem.item_name = item.item_name;
    this.currentItem.price = item.selling_price;
    this.currentItem.total = this.currentItem.price * this.currentItem.qty
  } else {
    this.currentItem.item_name = '';
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh the og:image for jQuery Autocomplete

How can I update the og:image when a selection is made in Jquery autocomplete? I have tried multiple methods but none seem to be working. Below is the code snippet: <head> <meta property="og:image" content="assets/css/gfx/skold.png" /> ...

Mastering Vue.js: Leveraging v-model within a v-for loop and implementing watchers

After retrieving a list of debits and credits from a server using the fetch function, I store them in my Vue application: const myApp = Vue.createApp({ data(){ return{ debits:[], credits:[], //cut } }, me ...

Unable to access res.name due to subscription in Angular

Right now, I am following a tutorial on YouTube that covers authentication with Angular. However, I have hit a roadblock: The code provided in the tutorial is not working for me because of the use of subscribe(), which is resulting in the following messag ...

WordPress: Issue with Dropdown onchange Event Not Triggering

I'm having trouble getting an event to fire when the dropdown value changes. Can anyone help me figure out where I might be going wrong? JavaScript code jQuery(document).ready(function($){ jQuery('#_ccounts select').on('change&apo ...

Angular-template static functions refer to functions that do not require an

Our project utilizes the linting-config provided by AirBnB. There is a rule that stipulates class methods must utilize this or be declared as static. While this rule theoretically makes sense, it seems to present challenges within an angular context. Consi ...

Implementing the jQuery datepicker in Angular.js can be challenging

I recently started learning Angular.js and have been working on a web application using this framework. I am now looking to include a datepicker in one of my forms. Below is the code snippet that I have implemented: app.js myapp.directive(& ...

Establishing a connection to MongoDB using JavaScript

Currently, I'm working on a fun little project revolving around a web calendar. For this project, I've decided to integrate mongoDB into it. Fortunately, I have successfully configured MongoDB and established a connection with PHP. However, I am ...

Create dimension markers on a 3D cube in Three.js by drawing dimension lines

Is it possible to create dynamic "lines" with the Cube element to represent different "Dimensions" during runtime? I have successfully created a cube and implemented functionality for users to input dimensions and modify the cube in real time. You can vie ...

What could be causing this issue of the Angular Material table not displaying properly?

I have been developing a Contacts application using Angular 9 and Angular Material. The goal is to display contact information and an image for each contact in a table row within the list component. Within my app.module.ts, I have imported various modules ...

Overcoming Troublesome Login Input Box in Web

In an effort to streamline tasks in our office, I am working on automating certain processes. Specifically, this program is designed to log into our insurance company's website and extract information for payroll purposes. Below is the code snippet th ...

What could be the reason behind the ineffectiveness of my recently acquired Google Maps API key

For years, I had a function working with the Google API flawlessly. However, after obtaining a new API key, everything seems to have gone haywire. The issue is that there is no output after the `alert(address)` line because the code from `geocoder.geocod ...

2 mistakes: (Uncaught ReferenceError: require isn't defined) & (npm ERR! script missing: start)

Issue #1: Environment Variables I am facing a problem with my JavaScript files app.js (main) and request.js. Both files are at the same level in the root directory, just like index.html. The request.js file contains process.env.APP_KEY. I attempted to i ...

Showing information at succeeding intervals with AngularJS

Check out the jsFiddle link provided for AngularJS data display: AngularJS : Display Data Here is a sample of the HTML file: <div ng-controller="myCtrl"> <div ng-repeat="test in tests"> <p>{{test.testName}}</p ...

Aligning text vertically to the top with material UI and the TextField component

Seeking guidance on adjusting vertical alignment of text in <TextField /> const styles = theme => ({ height: { height: '20rem', }, }); class Foo extends React.component { ... <TextField InputProps={{ classes: ...

How to use Angular filter to sort through an array and select multiple items based

Looking to implement a filter that, when clicked on a specific name, displays only that name: {'username': 'julio', 'status': 'created'}, {'username': 'julio', 'status': 'running&a ...

When multi or upsert is set to true, MongoDB fails to update records and promises continue to fail

I am facing issues with updating records in MongoDB using mongoose. Although my code seems to be correct, it does not update the record as expected. Below is the code snippet: edit(req, res, next) { var WorkType = require('../models/WorkType'); ...

The reactivity of my component's data varies - it is not responsive in methods, yet it is reactive

I have been working on implementing vuejs in my project, but I'm facing issues. I've spent hours trying to troubleshoot, and even though I have successfully used the same technique in another project, it's not working here. The packages data ...

Strategies for eliminating _next folder from file path within the build directory of Next Js

Is there a way to eliminate "_next" from the path in the build folder for Next Js version 13.2.4? For reference, here is an example: We would greatly appreciate any assistance on this matter. ...

Using Codeigniter to retrieve data via AJAX while ensuring CSRF protection is in place

Hey there, I've enabled CSRF protection in my CodeIgniter framework and now I'm trying to figure out how to include a CSRF token in my AJAX request. I keep encountering the error message "The action you requested is not allowed" with my AJAX requ ...

What is the best method for implementing numeric input in Vue.js?

I have experience developing web apps using Nuxt.js. I am currently trying to implement validation that excludes negative values and decimal points in all input tags (around 20-30) within the same Vue component. My approach involves injecting validation ru ...