Tips for Accessing Values in a Dynamic Array in Vue.js

Question

Tips for Accessing Values in a Dynamic Array in Vue.js

ArrayOrdered :[ { name :"PRODUCT 1", price :"20", amount:"10", Total 1:" ", discount : "" , Total 2:" " }, { name :"PRODUCT 2", price :"50", amount:"20", Total 1:" ", discount : "" , Total 2:" " }, { name :"PRODUCT 3", price :"15.5", amount:"10", Total 1:" ", discount : "" , Total 2:" " }, ................ ]

I need to calculate the value of Total 1 (price * amount) and Total 2 (Total1 * discount) after each addition to the array and then sum up all the total prices

javascript vue.js

Answer 1

Answer №1

Instead of directly altering your data, you can utilize a computed property to generate a new version of your list with the necessary items included. This approach is generally considered to be less prone to errors and easier to comprehend. Check out this functional example:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in itemsWithTotals" :key="index">
        <span>{{ item.total1 }} - {{ item.total2 }}</span>
      </li>
    </ul>
  </div>
</template>

const ITEMS = [
  { name: 'item1', price: 20, amount: 10, discount: 0 },
  { name: 'item2', price: 50, amount: 15, discount: 0.25 },
  { name: 'item3', price: 35, amount: 20, discount: 0.75 },
];

export default {
  data() {
    return { items: ITEMS };
  },
  computed: {
    itemsWithTotals() {
      return this.items.map(item => {
        const total1 = item.price * item.amount;
        const total2 = total1 * (1 - item.discount);
        return { ...item, total1, total2 };
      });
    },
  },
};

Note that I have updated your original data to have numerical properties instead of strings.

Answer 2

Instead of directly altering your data, you can utilize a computed property to generate a new version of your list with the necessary items included. This approach is generally considered to be less prone to errors and easier to comprehend. Check out this functional example:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in itemsWithTotals" :key="index">
        <span>{{ item.total1 }} - {{ item.total2 }}</span>
      </li>
    </ul>
  </div>
</template>

const ITEMS = [
  { name: 'item1', price: 20, amount: 10, discount: 0 },
  { name: 'item2', price: 50, amount: 15, discount: 0.25 },
  { name: 'item3', price: 35, amount: 20, discount: 0.75 },
];

export default {
  data() {
    return { items: ITEMS };
  },
  computed: {
    itemsWithTotals() {
      return this.items.map(item => {
        const total1 = item.price * item.amount;
        const total2 = total1 * (1 - item.discount);
        return { ...item, total1, total2 };
      });
    },
  },
};

Note that I have updated your original data to have numerical properties instead of strings.

Tips for Accessing Values in a Dynamic Array in Vue.js

Answer №1

Similar questions

Troubleshooting CSS override issues when swapping components in ReactJS

Compatibility with IE9: Using jQuery to send an AJAX POST request

When a custom icon is clicked in the vue-select dropdown, the custom method is not activated

Save canvas as an image, with the option to incorporate additional text from a textarea element on the page into

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

The way in which notifications for updates are displayed on the Stack Overflow website

Unlocking the power of translation in React: Implementing Amazon Translate or Google Translate for AXIOS responses

methods for performing multiplication on dynamically inserted variables using jquery

Variables are losing their way in the vast expanse of self-submitting

PHP: Extracting the selected value from a dropdown menu and incorporating it into an HTML link

Centralized Vendor Repository for Managing Multiple Angular2 Applications

Switching icon with jQuery upon clicking

When troubleshooting the "Uncaught reference error: require is not defined," the browserify command encountered the error message "Error: Cannot find module."

Problem with Jquery Ajax, failing to recognize option values

The timing of setTimeout within the $.each function does not behave as expected

Counting gettext values up to a specified number of occurrences

Discovering the size and count of JavaScript objects within a browser's memory

Using HTML Select field to make ajax calls to web services

WebGl - Perspective skewing perspective

Encountering an undefined json array when making an AJAX request