Creating a list repeater using v-for in Vue.js 2 with computed property

Question

Creating a list repeater using v-for in Vue.js 2 with computed property

Seeking assistance with adding computed columns to a table (last three columns). Suspecting the issue lies in the computed property not correctly referencing the record. Any simple solutions that I might be overlooking? Appreciate any thoughts or insights!

Link to the fiddle: https://jsfiddle.net/0770ct39/2/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vue.js Tutorial | More Computed Properties</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>
    <div id="app" class="container">
      <div class="row">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Phase</th>
                        <th>Labour Budget</th>
                        <th>Labour Hours</th>
                        <th>Labour Cost Rate</th>
                        <th>Labour Cost</th>
                        <th>Overhead Cost</th>
                        <th>Net</th>
                    </tr>   
                </thead>
                <tbody>
                    <tr v-for="record in records">
                        <td>{{record.phase}}</td>
                        <td>{{record.labourBudget}}</td>
                        <td><input type="text" v-model="record.labourHours"></td>
                        <td><input type="text" v-model="record.labourCostRate"></td>
                        <td>{{record.labourCost}}</td>
                        <td>{{record.overheadCost}}</td>
                        <td>{{record.net}}</td>
                    </tr>
                </tbody>
            </table>
      </div>
    </div>
  </body>

  <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f5f6e6c3b1adb3adb0">[email protected]</a>/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        records: [
            {phase:"Phase1", labourBudget: 100, labourHours: 4, labourCostRate: 45},
            {phase:"Phase2", labourBudget: 100, labourHours: 2, labourCostRate: 42}
        ]
      },
      computed: {
        labourCost: function(){
            return this.record.labourHours * this.record.labourCostRate;
        },
        overheadCost: function(){
            return this.record.labourCost * 1.36;
        },
        net: function(){
            return this.record.netRevenue-this.record.labourCost-this.record.overheadCost;
        }
      }
    })
  </script>
</html>

javascript vue.js vuejs2

Answer 1

Answer №1

Your computed property functions may not be working properly due to the fact that the keyword this refers to your Vue instance. To illustrate, if you were to adjust your computed functions in this manner...

computed: {
  labourCost: function() {
    return app.record.labourHours * app.record.labourCostRate;
  }
}

...it would essentially have the same functionality as your current setup because the variable app points back to your Vue instance.

In its present state, when Vue processes your computed properties, it will encounter an issue where it cannot find a data property named record. Although there is one called records, none are specifically named record.

I suggest returning a computed array containing all the records like this:

var app = new Vue({
  el: '#app',
  data: {
    records: [
        {phase:"Phase1", labourBudget: 100, labourHours: 4, labourCostRate: 45},
        {phase:"Phase2", labourBudget: 100, labourHours: 2, labourCostRate: 42}
    ]
  },
  computed: {
    rows: function() {
      return this.records.map(function(record) {
        return Object.assign({}, record, {
          labourCost : record.labourHours * record.labourCostRate,
          overheadCost : record.labourCost * 1.36,
          net : record.netRevenue-record.labourCost-record.overheadCost
        });
      });
    }
  }
})

Subsequently, update the loop in your HTML to

<tr v-for="record in rows">

NOTE: Object.assign() is part of ES2015. You have the option of using this polyfill. Alternatively, consider utilizing object-merge functions like lodash's _.assign or jQuery.extend().

Answer 2

Your computed property functions may not be working properly due to the fact that the keyword this refers to your Vue instance. To illustrate, if you were to adjust your computed functions in this manner...

computed: {
  labourCost: function() {
    return app.record.labourHours * app.record.labourCostRate;
  }
}

...it would essentially have the same functionality as your current setup because the variable app points back to your Vue instance.

In its present state, when Vue processes your computed properties, it will encounter an issue where it cannot find a data property named record. Although there is one called records, none are specifically named record.

I suggest returning a computed array containing all the records like this:

var app = new Vue({
  el: '#app',
  data: {
    records: [
        {phase:"Phase1", labourBudget: 100, labourHours: 4, labourCostRate: 45},
        {phase:"Phase2", labourBudget: 100, labourHours: 2, labourCostRate: 42}
    ]
  },
  computed: {
    rows: function() {
      return this.records.map(function(record) {
        return Object.assign({}, record, {
          labourCost : record.labourHours * record.labourCostRate,
          overheadCost : record.labourCost * 1.36,
          net : record.netRevenue-record.labourCost-record.overheadCost
        });
      });
    }
  }
})

Subsequently, update the loop in your HTML to

<tr v-for="record in rows">

NOTE: Object.assign() is part of ES2015. You have the option of using this polyfill. Alternatively, consider utilizing object-merge functions like lodash's _.assign or jQuery.extend().

Answer 3

Answer №2

To make this functionality work, you should consider separating each row into its own component and passing the 'record' data as a prop. Alternatively, if you prefer not to create separate components, you can utilize methods instead.

For example:

methods: {
  laborCost: function(record) {
    return record.labourHours * record.labourCostRate
  },
  ...
}

You can then call this method like so:

{{ laborCost(record) }}

If you choose to go the component route (which is recommended), you would do something like this:

<record v-for="record in records" :record="record"></record>

You can then transfer those computed properties into the component, ensuring that it functions as intended.

Answer 4

To make this functionality work, you should consider separating each row into its own component and passing the 'record' data as a prop. Alternatively, if you prefer not to create separate components, you can utilize methods instead.

For example:

methods: {
  laborCost: function(record) {
    return record.labourHours * record.labourCostRate
  },
  ...
}

You can then call this method like so:

{{ laborCost(record) }}

If you choose to go the component route (which is recommended), you would do something like this:

<record v-for="record in records" :record="record"></record>

You can then transfer those computed properties into the component, ensuring that it functions as intended.

Creating a list repeater using v-for in Vue.js 2 with computed property

Answer №1

Answer №2

Similar questions

Switch back and forth between adding and removing a table row using jQuery

Ensure the item chosen is displayed on a single line, not two

React Native: LogBox now including all warnings

Validation with vee-validate performed instantly after inputting every character

Guide to inserting .json data into a .js file

Is it more suitable for a library used by getStaticProps to be classified as a normal dependency or a dev

Error encountered: DataTable - Unable to retrieve the 'length' property of a null value

Achieving the perfect sorting result in an array using Javascript

Mapping Service by Google - Navigate from your current location to desired destination

The JavaScript array remains unaltered

Alert Box Displays Variable Name Instead of Label Name in Form Validation - MM_validateForm()

Email attachments not working in Node Mailgun

Troubleshooting Issues with Implementing JavaScript for HTML5 Canvas

Bringing in PeerJs to the NextJs framework

Error in node.js framework due to memory allocation issue

Difficulties encountered when initiating CRA using npm start

Requesting the user to repeatedly input their birth year until it is less than the current year

CustomTooltips in ChartJS allowing for an enhanced visual presentation of data

Do we need to have the 'input type file' field as

How can I save variable values to a text file or Excel file using Cypress.io?