VueJS 2 - Monitoring variables within arrays and objects

Question

VueJS 2 - Monitoring variables within arrays and objects

Illustration of the issue: https://jsfiddle.net/hxv5bLqt/

In my data structure, there are two levels (arrays). The top level represents "parts", and each "part" contains a set of "items". Additionally, there is a variable that stores the total value of all items. The functionality needed involves recalculating this total whenever a user modifies any value field.

Although I have implemented a solution for this requirement, I find it unsatisfactory as it involves manually tracking where the "this.recompute()" method should be called. Utilizing watch functions or computed properties would offer a cleaner and more reactive approach.

Unfortunately, implementing a "watch" or a "computed property" to monitor changes within objects nested in arrays has proven challenging.

An ideal watch function that I envisioned working would look something like:

watch: {
    'parts.X.items.Y.value': function(oldValue, newValue) {
         this.recompute()
    }
}

The variables "X" and "Y" represent placeholders for indicating any positions within the arrays that we want to observe.

This setup would trigger the watch every time a user interacts with an item by removing it or editing its value. However, this approach does not yield the expected results, leading me back to manually calling "this.recompute()" at specific points in the code:

onClickRemoveItem(event, part, item) {
    ...
    this.recompute() // RECOMPUTE HERE.
},

onKeyupItemValue(event) {
    this.recompute() // RECOMPUTE HERE.
},

I believe relying on explicit function calls like this is not an elegant solution, especially when dealing with numerous potential call sites for "this.recompute()". Is there a more efficient and elegant way to address this issue?

javascript vue.js vuejs2

Answer 1

Answer №1

When you create a computed property for your total, you automatically gain more reactivity without the need to manually track updates or recalculate values. For a specific implementation example, check out this answer: https://jsfiddle.net/16wk9grf/

Here is an example of how it can be implemented:

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <h3>Tests</h3>
  <ul>
    <li v-for="part in parts">
      <span>{{ part.name }}</span>
      <ul>
        <li v-for="item in part.items">
          R$ <input type="number" v-model="item.value">
          <button type="button" @click="onClickRemoveItem($event, part, item)">Remove</button>
        </li>
        <p>
           Part subtotal: ${{ part.items.reduce((acc, item) => acc + parseFloat(item.value), 0) }}
        </p>
        <p>
          Part subtotal (alternate): ${{ calculatePartSubtotal(part.items) }}
      </p>
      </ul>
    </li>
  </ul;

  <p><strong>Total value:</strong>R$ {{ total }}</p>
</div>

JS

new Vue({
  el: '#app',
  data() {
    return {
      // Mock nested data.
      parts: [
        { id: 1, name: 'Part 1', items: [{ id: 1, value: 10.00 }, { id: 2, value: 5.00 }] },
        { id: 2, name: 'Part 2', items: [{ id: 3, value: 15.00 }] }
      ]
   }
 },
computed: {
  total () {
    let total = 0.0
    for (let i = 0; i < this.parts.length; i++) {
      for (let j = 0; j < this.parts[i].items.length;; j++) {
        total += parseFloat(this.parts[i].items[j].value)
      }
    }
    return total
  }
},
methods: {
  calculatePartSubtotal (items) {
    return items.reduce((acc, item) => acc + parseFloat(item.value), 0)
  },
  onClickRemoveItem(event, part, item) {
    let index = part.items.findIndex(e => e.id === item.id)
    this.$delete(part.items, index)
   }
 }
})

Answer 2

When you create a computed property for your total, you automatically gain more reactivity without the need to manually track updates or recalculate values. For a specific implementation example, check out this answer: https://jsfiddle.net/16wk9grf/

Here is an example of how it can be implemented:

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <h3>Tests</h3>
  <ul>
    <li v-for="part in parts">
      <span>{{ part.name }}</span>
      <ul>
        <li v-for="item in part.items">
          R$ <input type="number" v-model="item.value">
          <button type="button" @click="onClickRemoveItem($event, part, item)">Remove</button>
        </li>
        <p>
           Part subtotal: ${{ part.items.reduce((acc, item) => acc + parseFloat(item.value), 0) }}
        </p>
        <p>
          Part subtotal (alternate): ${{ calculatePartSubtotal(part.items) }}
      </p>
      </ul>
    </li>
  </ul;

  <p><strong>Total value:</strong>R$ {{ total }}</p>
</div>

JS

new Vue({
  el: '#app',
  data() {
    return {
      // Mock nested data.
      parts: [
        { id: 1, name: 'Part 1', items: [{ id: 1, value: 10.00 }, { id: 2, value: 5.00 }] },
        { id: 2, name: 'Part 2', items: [{ id: 3, value: 15.00 }] }
      ]
   }
 },
computed: {
  total () {
    let total = 0.0
    for (let i = 0; i < this.parts.length; i++) {
      for (let j = 0; j < this.parts[i].items.length;; j++) {
        total += parseFloat(this.parts[i].items[j].value)
      }
    }
    return total
  }
},
methods: {
  calculatePartSubtotal (items) {
    return items.reduce((acc, item) => acc + parseFloat(item.value), 0)
  },
  onClickRemoveItem(event, part, item) {
    let index = part.items.findIndex(e => e.id === item.id)
    this.$delete(part.items, index)
   }
 }
})

VueJS 2 - Monitoring variables within arrays and objects

Answer №1

Similar questions

Troubleshooting an issue with window.close in AngularJS

Using webpack's hash in JavaScript for cache busting

ESlint is unable to parse typescript in .vue files

The hamburger icon seems to be frozen and unresponsive

"The integration of Laravel Passport and Vue, together with Guzzle, is failing to return the token

Ajax RSS Feed - Weather Data from OpenWeatherMap

Issue: "StoreController Undefined" error in Python Flask + Angular application

Leveraging yield in Angular (ES6)

What steps can be taken to disable Angular's automatic trimming of fields?

Is there a way in vee-validate to validate specific sections of a form?

The integration of Firebase Google Auth seems to encounter issues when used on the Vercel

Navigation bar failing to show all content on Safari web browser

How can I create a customized placeholder effect for the Paytm login page text box?

Guide to implementing an animate-on-scroll feature for data retrieved in a React application

Launching various modals on marker click

Differences in disabled option value selection between jQuery legacy and updated versions

What could be causing the Angular HTTPClient to make duplicate REST calls in this scenario?

Accessing the current instance in Vue when triggered by a checkbox event

Change the background color of form checkboxes in a different way

What are the steps to recursively transform a JavaScript object?