Exploring VueJs 2.0: Iterating through components and updating properties

Question

Exploring VueJs 2.0: Iterating through components and updating properties

Searching for the optimal method to handle looping components has been my current focus. Below is an example of my coding dilemma.

What I am attempting to accomplish is having payments data in my main component loop into child components.

<tr v-for="payment in payments"
is="component-payment-item"
:payment="payment
v-on:toggleReported="togglePaymentReported"">
 </tr>

Whenever a child component needs to mark a payment as reported, it sends an event back up to the parent component. To tackle this issue, I coded the following solution:

togglePaymentReported(payment) {
    payment.reported = ! payment.reported;
}

Although the function executes properly, the changes do not reflect in the child component. I have considered directly modifying the payment within the array, assuming it would be passed by reference and updated in the child component as well.

In vue 1.0, adjusting the child component itself was feasible but not recommended and no longer supported in vue 2.0. What approach should I adopt in this scenario?

javascript vue.js

Answer 1

Answer №1

Make sure to include the current payment as an argument in your togglePaymentReported method.

pb = Vue.extend({
  template: '#paybutton-template',
  props: ['payment'],
  methods: {
    toggle: function() {
      this.$emit('toggle');
    }
  }
});

vm = new Vue({
  el: '#app',
  components: {
    'payment-button': pb
  },
  data: {
    payments: []
  },
  methods: {
    handleToggle: function(payment) {
      payment.paid = !payment.paid;
    }
  },
  mounted: function() {
    // Simulating setting from ajax
    setTimeout(() => {
      this.payments = [{
        id: 1,
        paid: false
      }, {
        id: 2,
        paid: false
      }];
    }, 800);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<div id="app">
  <payment-button v-for="payment in payments" :payment="payment" v-on:toggle="handleToggle(payment)"></payment-button>
</div>

<template id="paybutton-template">
  <div>
    {{payment.id}}: {{payment.paid}}
    <button @click="toggle">Pay</button>
  </div>
</template>

Answer 2

Make sure to include the current payment as an argument in your togglePaymentReported method.

pb = Vue.extend({
  template: '#paybutton-template',
  props: ['payment'],
  methods: {
    toggle: function() {
      this.$emit('toggle');
    }
  }
});

vm = new Vue({
  el: '#app',
  components: {
    'payment-button': pb
  },
  data: {
    payments: []
  },
  methods: {
    handleToggle: function(payment) {
      payment.paid = !payment.paid;
    }
  },
  mounted: function() {
    // Simulating setting from ajax
    setTimeout(() => {
      this.payments = [{
        id: 1,
        paid: false
      }, {
        id: 2,
        paid: false
      }];
    }, 800);
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
<div id="app">
  <payment-button v-for="payment in payments" :payment="payment" v-on:toggle="handleToggle(payment)"></payment-button>
</div>

<template id="paybutton-template">
  <div>
    {{payment.id}}: {{payment.paid}}
    <button @click="toggle">Pay</button>
  </div>
</template>

Exploring VueJs 2.0: Iterating through components and updating properties

Answer №1

Similar questions

Using sql.js to import CSV files into SQLite databases

Change the behavior of JavaScript so that it executes when clicked, not when the

Updating .babelrc to include the paths of JavaScript files for transpilation

Attempting to iterate over elements within an object labeled as strIngredients 1-15

Navigating to a different URL in a remoteMethod with Loopback and Express

Guidelines for setting up Kendo notifications using an angularjs service

Tips for stopping a click from going through a fixed element to the one in the background

Join and Navigate in Angular 2

Is JavaScript responsible for creating threads for non-blocking AJAX requests?

VUE JS - My methods are triggering without any explicit invocation from my side

Creating a comparison display using ng-repeat

Exploring the implementation of the meta robots tag within Joomla 2.5's global settings

Is there a way to transform an Array or Object into a new Object mapping?

Ways to prevent event bubbling in the case of a checkbox input alteration?

Halt the execution of any additional code

Experience the power of ReactJS as you utilize the componentDidMount lifecycle method to fetch data

Acquiring an alternative data structure in JavaScript or JSON

Vuetify Slide Groups when clicked on, will toggle on and off

ExpressJS exhibits unique behavior based on whether the API is requested with or without the specified PORT number

Add opening and closing HTML tags to enclose an already existing HTML structure