Inspecting a substring of an element dynamically added in VueJs

Question

Inspecting a substring of an element dynamically added in VueJs

When I click a button in my form, it adds a new line. The challenge is making sure that each new line evaluates independently and correctly. In this case, the task involves checking the first 2 digits of a barcode against a dataset to determine a match or return "nothing found". At the moment, the evaluation is not working as expected - it always displays "No Agency found" and applies this to all fields because they share the same v-model on a new line add. How can I modify this so that each field is evaluated correctly and independently?

Below are the relevant sections from my template and script:

<div id="q-app" class="q-pa-lg">
 <!-- Code snippet here -->
</div>


export default {
  data() {
    return {
        // Data properties listed here
    };
  },
  methods: {
      // Methods defined here
  },
  mounted() {
      // Code for mounting the application
  } 
}

For a more detailed look at the code, check out the codepen.

javascript vue.js vuejs2

Answer 1

Answer №1

Here are a few things to consider in this code:

To avoid confusion, try not to name loop variables the same as top-level data elements. Instead of

<div v-for="(barcodefield, index) in barcodefields" :key="index">

, use

<div v-for="(item, index) in barcodefields" :key="index">

. Then make sure to update all instances of barcodefield.start and barcodfield.end to item.start and item.end.

Furthermore, ensure that each item has its own unique agencyName instead of all items sharing the same value.

Modify the showAgencyName method like so:

showAgencyName(item) {
    var str = item.end;
    var res = str.substring(0, 2);
    if (this.barcodeprefixes[res] == undefined) {
        item.agencyName = "Agency not found";
    } else {
        item.agencyName = this.barcodeprefixes[res];
    }
},

Then, call it using @blur="showAgencyName(item)"

Lastly, utilize it in the HTML like this:

<div v-if="item.agencyName" style="min-height: 40px">
    {{ item.agencyName }}
</div>

(You can also remove the top-level barcodefield from the data object since it is no longer needed.)

Check out the updated version on: https://jsfiddle.net/ebbishop/7r1pqx9f/

Answer 2

Here are a few things to consider in this code:

To avoid confusion, try not to name loop variables the same as top-level data elements. Instead of

<div v-for="(barcodefield, index) in barcodefields" :key="index">

, use

<div v-for="(item, index) in barcodefields" :key="index">

. Then make sure to update all instances of barcodefield.start and barcodfield.end to item.start and item.end.

Furthermore, ensure that each item has its own unique agencyName instead of all items sharing the same value.

Modify the showAgencyName method like so:

showAgencyName(item) {
    var str = item.end;
    var res = str.substring(0, 2);
    if (this.barcodeprefixes[res] == undefined) {
        item.agencyName = "Agency not found";
    } else {
        item.agencyName = this.barcodeprefixes[res];
    }
},

Then, call it using @blur="showAgencyName(item)"

Lastly, utilize it in the HTML like this:

<div v-if="item.agencyName" style="min-height: 40px">
    {{ item.agencyName }}
</div>

(You can also remove the top-level barcodefield from the data object since it is no longer needed.)

Check out the updated version on: https://jsfiddle.net/ebbishop/7r1pqx9f/

Answer 3

Answer №2

To start off, recommend renaming the variable used in the for loop from "barcodefield" to avoid conflicts with existing data structures.
Next, consider utilizing a function like {{ getAgencyName(b) }} instead of directly using {{ agencyName }} to ensure unique agency names for each line.

Answer 4

To start off, recommend renaming the variable used in the for loop from "barcodefield" to avoid conflicts with existing data structures.
Next, consider utilizing a function like {{ getAgencyName(b) }} instead of directly using {{ agencyName }} to ensure unique agency names for each line.

Answer 5

Answer №3

There seems to be a couple of issues with this code snippet. First, there appears to be a typo in the barcodefield data object where "star" is used instead of "start."

Additionally, within the showAgency method, references to the non-existent this.barcodefield properties are made. One solution could be passing the index of the barcodefield to the showAgencyName method and using it to access the desired barcodefield from the barcodefields array.

In the HTML section:

<q-input outlined square dense maxlength="24"
v-model.trim="barcodefield.end" @blur="showAgencyName(index)" ref="bcentry"></q-input>

The showAgencyName method should look like this:

showAgencyName(index) {
    const barcodefield = this.barcodefields[index]
    var str = barcodefield.end;
    var res = str.substring(0, 2);

    if (this.barcodeprefixes[res] == undefined) {
        this.agencyName = "Agency not found";
    } else {
        this.agencyName = this.barcodeprefixes[res];
    }
}

UPDATE: Upon closer inspection, another issue has been identified. The agencyName variable gets overwritten each time a new barcodefield is added since it functions as a global value. I have updated the Codepen with a simple solution - now the name of the agency is returned from the showAgencyName method and displayed on the interface. There are various other potential solutions for this problem (such as adding the name to the barcodefields object in the array).

For a working example, check out this Codepen

Answer 6

There seems to be a couple of issues with this code snippet. First, there appears to be a typo in the barcodefield data object where "star" is used instead of "start."

Additionally, within the showAgency method, references to the non-existent this.barcodefield properties are made. One solution could be passing the index of the barcodefield to the showAgencyName method and using it to access the desired barcodefield from the barcodefields array.

In the HTML section:

<q-input outlined square dense maxlength="24"
v-model.trim="barcodefield.end" @blur="showAgencyName(index)" ref="bcentry"></q-input>

The showAgencyName method should look like this:

showAgencyName(index) {
    const barcodefield = this.barcodefields[index]
    var str = barcodefield.end;
    var res = str.substring(0, 2);

    if (this.barcodeprefixes[res] == undefined) {
        this.agencyName = "Agency not found";
    } else {
        this.agencyName = this.barcodeprefixes[res];
    }
}

UPDATE: Upon closer inspection, another issue has been identified. The agencyName variable gets overwritten each time a new barcodefield is added since it functions as a global value. I have updated the Codepen with a simple solution - now the name of the agency is returned from the showAgencyName method and displayed on the interface. There are various other potential solutions for this problem (such as adding the name to the barcodefields object in the array).

For a working example, check out this Codepen

Inspecting a substring of an element dynamically added in VueJs

Answer №1

Answer №2

Answer №3

Similar questions

Unexpected JavaScript Bug (with jQuery)

Showing JSON data as a table in an HTML format

The Javascript style.opacity function eliminates the leading zero from the input string

Error encountered while scrolling with a fixed position

What is the Most Effective Way to Generate Sequential Output in PHP?

Transfer the imageURI to a different HTML page

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

What is the best way to combine two responses and then convert them into a promise?

Creating dynamic styles with Material-UI's useStyles

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

v-select/Vue: Can I input a value that is not in the dropdown list?

Execute multiple events using jQuery's .trigger() method

Express.js fails to redirect to the sign-in page after successfully retrieving the username from the MySQL database

Substitute a particular element within a text

The Philosophy Behind Structuring Node.js Modules

how to open a new tab using JavaScript with Selenium

Ensure the buttons within v-card-actions are responsive to different screen sizes

The route path consists of data that will be retrieved before entering the route

issues encountered when trying to integrate bootstrap.js in Django framework

What is the most effective method for serializing SVG data from the client's Document Object Model (DOM